Question

在我的项目中，我正在尝试更改容器内所有面板的背景颜色。我正在尝试的代码如下：

container --> panel (don't change) --> panel (Change)

//Generated dynamically using for loop.
listeners: {
   'render': function(panel) {
        panel.body.on('click', function() {
                //here change the background color of all the panels inside the container>panel. 
        });
    }
}

我应该写什么来改变主容器的父面板内存在的唯一面板的背景颜色？

我试过了：

Ext.each('panel',function(){this.body.setStyle('background','white')}),

但上述方法给出了以下错误：

未捕获的TypeError：无法调用未定义的方法'setStyle'

修改：

在这里，我正在寻找一种与jQuery的children()完全相同的extjs方法。

$('#containerID').children('panel').children('panel').css(change background color);

Answer 1

根据您的要求，您将始终拥有您正在查看的9个组件的总和-1。最简单的方法是使用MixedCollection的each()方法（在运行时所有项都在MixedCollection中）

'render': function(panel) {
    panel.body.on('click', function() {
         panel.items.each(function(p){ p.body.setStyle('background','white'); }, this)
    },this);
}

这可能不是具有最佳性能的变体，但从最后一个问题了解您的要求我可以说这是最简单的。此外，它易于维护。并阅读我在上一个问题的评论中发布的关于代表的文章！

我希望现在有拼写错误，因为它未经测试

<强>更新

嗯，你在这里寻找ownerCt属性（至少这是最简单的方法）。但是有一些更强大的导航方法up() / down()都可以使用ComponentQuery字符串进行填充。保留up()个参数为空将返回直接所有者/激活器（基本上与ownerCt相同）。

遵循一个工作示例：

var childItems = [], items = [];
for (i = 0; i < 9; ++i) {
    childItems.push({
        xtype: 'container',
        width: 50,
        height: 50,
        html: i + '',
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
        listeners: {
            'afterrender': function(panel) {
                panel.el.on('click', function(e,t) {
                    panel.el.on('click', function(e,t) {
                    panel.el.setStyle('background','red');
                    panel.ownerCt.items.each(function(p){ if(panel.el.id != p.id) p.el.setStyle('background','white'); })
                });
             }
        }
    });
}
for (i = 0; i < 9; ++i) {
    items.push({
        xtype: 'container',
        layout: {
            type: 'table',
            columns: 3
        },
        style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
        items: childItems
    });
}
Ext.create('Ext.container.Container', {
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    renderTo: Ext.getBody(),    
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px', margin: '30px'},
    items: items
});

更新2

要重置所有尝试此（未经测试）

'afterrender': function(panel) {
          panel.el.on('click', function(e,t) {
              panel.el.setStyle('background','red');
              panel.ownerCt.ownerCt.items.each(function(op){ 
                   op.items.each(function(p){ 
                       if(panel.el.id != p.id) 
                          p.el.setStyle('background','white'); 
                   })
              }, this)
          });
 }

<强> JSFiddle

更改extjs中面板的背景颜色

1 个答案: