更改extjs中面板的背景顏色

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