0

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

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')}),

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

未捕获的类型错误：无法调用未定义的方法“setStyle”

编辑：

在这里，我正在寻找一种 extjs 的方法，它与 jQuery 的children().

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

1 回答 1

2

根据您的要求，您将始终拥有您正在查看的 9 个组件的总和 -1 您从开始。最短的方法是使用each()MixedCollection 的方法（在运行时所有项目都在 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

于 2013-02-04T12:04:34.057 回答