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

しかし、上記のアプローチは私に次のエラーを与えています：

Uncaught TypeError：未定義のメソッド'setStyle'を呼び出すことができません

編集：

ここでは、jQueryとまったく同じ動作をするextjsのメソッドを探しています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 に答える