Question

我有一个观点：

Ext.define('Demo.example.OpenRequest', {
    extend: 'Ext.draw.Component',
    xtype: 'demo',
    height: 280,
    width: 1213,
    viewBox: false,
    listeners: {
        'beforerender': function (panel) {
            alert("Hi");
            alert(panel.param);
            alert(panel);
            var itemArray = panel.items;
            itemArray.forEach(function (i) {
                if (i.itemId == 'green-rect') {
                    i.addCls('x-hide-display');
                }
            });
        }
    },
    constructor: function (config) {
        this.items = [{
                type: "image",
                src: 'http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/64/green-user-icon.png',
                width: 100,
                height: 100,
                translate: {
                    x: 10,
                    y: 80
                }
            },
            {
                type: 'rect',
                itemId: 'green-rect',
                width: 200,
                height: 50,
                radius: 10,
                fill: 'green',
                opacity: 0.5,
                stroke: 'black',
                'stroke-width': 2,
                translate: {
                    x: 400,
                    y: 110
                },
                listeners: {
                    click: function (as) {
                        alert('A');
                    }
                }
            },
            {
                type: 'rect',
                width: 200,
                height: 50,
                radius: 10,
                itemId: 'red1-rect',
                fill: 'red',
                opacity: 0.5,
                stroke: 'black',
                'stroke-width': 2,
                translate: {
                    x: 890,
                    y: 10
                },
                listeners: {
                    click: function () {
                        alert('B');
                    }
                }
            }];

        if (this.items) {
            Ext.apply(config, {
                items: this.items
            });
        }
        this.callParent([config]);
    }
});

在beforerender监听器中，我想根据值隐藏绿色矩形。我在那里检查i.itemId =='green-rec'我正在添加一个隐藏属性的类。但是我将错误视为未定义的函数。我应该如何隐藏它。

的CSS：

.x-hide-display {
    display: none;
}

Answer 1

我在fiddle中测试了您的代码，当您想要真实项目时，您需要panel.items.items。以下代码应该可以使用

var itemArray = panel.items.items; //now you have the items you want to iterrate over
Ext.Object.each(itemArray, function (key, value) {
    if (value.itemId == 'green-rect') {
        value.addCls('x-hide-display');
    }
});

panel.items的类型为Ext.util.Collection，因此您可以执行以下操作

var itemArray = panel.items;
itemArray.each(function (item) {
    if (item.itemId == 'green-rect') {
        item.addCls('x-hide-display');
    }
});

Answer 2

现在试试这个解决方案，但是，我不喜欢基于Ext id的元素查询： -

var drawComponent = Ext.create('Ext.draw.Component', {
viewBox: false,
items: [{
    type: 'circle',
    fill: '#79BB3F',
    id: 'green-rect',
    itemId:'green-rect',
    radius: 100,
    x: 100,
    y: 100
}],
listeners: {
    'afterrender': function(panel) {
        alert("Hi");
        alert(panel.param);
        alert(panel);
        var itemArray = panel.items;
        //debugger;
        Ext.getElementById('green-rect').style.display = 'none';
    }
}

}）;

Ext.create('Ext.Window', {
width: 215,
height: 235,
layout: 'fit',
items: [drawComponent]

}）表示（）;

尝试过发布的其他解决方案，但它不起作用，因为即使在更换子项目不是Ext Component，也只是一个配置。

items对象中没有hide或addClass或任何其他Ext.Component方法。

enter image description here

Answer 3

您可以执行以下操作：

if (var obj = itemArray.find('itemId', 'green-rect')) {
    obj.addCls('x-hide-display'); 
}

编辑：

此对象没有addCls方法。您应该使用hide()方法隐藏矩形：

if (var obj = itemArray.find('itemId', 'green-rect')) {
    obj.hide(); 
}

如何获取组件对象？

3 个答案: