その項目の変更、他のタブには、私はこのコードを試してみたが最初のタブのラベルが示されていない変更</p> <p>を反映するときように、複数のタブで同じ項目を再利用する方法ExtJSの

Question

で複数のタブで同じアイテムを使用しました：

var label = Ext.create('Ext.form.Label', { 
    text : 'mylabel' 
}); 

Ext.onReady(function() { 
Ext.create('Ext.tab.Panel', { 
    width : 200, 
    height : 200, 
    renderTo : Ext.getBody(), 
    items : [{ 
     title : 'tab1', 
     items : [label, { 
      xtype : 'button', 
      handler : function() { 
       label.setText('changed from tab1'); 
      } 
     }] 
    }, { 
     title : 'tab2', 
     items : [label, { 
      xtype : 'button', 
      handler : function() { 
       label.setText('changed from tab2'); 
      } 
     }] 
    }] 
}); 
}); 

ごめんなさい、私はラベルの同じインスタンスが表示され、すべてのタブから変更することができるように（グローバル変数のように）グローバルラベルを使用することです何を意味するか

Answer 1

あなたのラベルを定義することができますコンポーネント：

Ext.define('MyLabel', { 
    extend: 'Ext.form.Label', 
    alias: 'widget.mylabel', 
    text : 'mylabel' 
}); 

エイリアスプロパティは、（この場合は、mylabelという中）クラス名の別名であり、あなたがこの

のように、コンポーネントを再利用することができ、このようにXTYPE

として「mylabelという」を使用することができる理由です

var panel = Ext.create('Ext.tab.Panel', { 
    width : 200, 
    height : 200, 
    renderTo : Ext.getBody(), 

    items : [{ 
     title : 'tab1',    
     items : [{ 
      xtype: 'mylabel', 
      itemId: 'item1' 
     }, { 
      xtype : 'button',     
      handler : function(button) { 
      panel.down('#item2').setText('changed from tab1'); 
     } 
    }] 
    }, { 
     title : 'tab2',    
     items : [{ 
      xtype: 'mylabel', 
      itemId: 'item2'    
     }, { 
      xtype : 'button', 
      handler : function(button) { 
      panel.down('#item1').setText('changed from tab2'); 
     } 
    }] 

}); 

Answer 2

あなたがここで必要なものを正確に行うことはできません。あなたは、ラベルを作成するときに、基本的なDOMを持っていることがわかります。当然、DOMは1つの場所にしか存在できません（したがって、両方のタブで同じことを示すことはできません）。

両方のタブに表示したいコンポーネントがある場合、データの階層的な観点からは「上位」のようです。おそらくそれはタブパネルの外にありますか？

ラベルが本当に両方のタブに属していて、「同じ」である必要がある場合は、偽装する必要があるか、手動でタブ間を移動する必要があります。

オプション1：偽それ

あなたはlaurac投稿のように、カスタムラベルクラスを作成することによって、ここでほとんどのコードの再利用を得ることができます。あなたはまだ同期してラベルテキストを維持する必要があるので、あなたは相手のテキストが変更されたときに1を更新する必要があるとしている：を「クリーン」に感じることはありません明らかに

var label1 = Ext.create('Ext.form.Label', { 
    text : 'mylabel' 
}); 
var label2 = Ext.create('Ext.form.Label', { 
    text : 'mylabel' 
}); 

Ext.onReady(function() { 
Ext.create('Ext.tab.Panel', { 
    width : 200, 
    height : 200, 
    renderTo : Ext.getBody(), 
    items : [{ 
     title : 'tab1', 
     items : [label1, { 
      xtype : 'button', 
      handler : function() { 
       label1.setText('changed from tab1'); 
       label2.setText('changed from tab1'); 
      } 
     }] 
    }, { 
     title : 'tab2', 
     items : [label2, { 
      xtype : 'button', 
      handler : function() { 
       labe2.setText('changed from tab2'); 
       labe1.setText('changed from tab2'); 
      } 
     }] 
    }] 
}); 
}); 

。

オプション2：手動制御

このハックが、それらが活性化されるとき1.基本的な考え方は、二つのタブに間のラベルを移動することですオプションよりもやや少ないハックかもしれません：

var label = Ext.create('Ext.form.Label', { 
    text : 'mylabel' 
}); 

Ext.onReady(function() { 
Ext.create('Ext.tab.Panel', { 
    width : 200, 
    height : 200, 
    renderTo : Ext.getBody(), 
    items : [{ 
     title : 'tab1', 
     items : [{ 
      xtype : 'button', 
      handler : function() { 
       label.setText('changed from tab1'); 
      } 
     }], 
     listeners: { 
      scope: this, 
      activate: function(panel) { 
       panel.insert(0, label); 
       panel.doLayout(); 
      } 
     } 
    }, { 
     title : 'tab2', 
     items : [{ 
      xtype : 'button', 
      handler : function() { 
       label.setText('changed from tab2'); 
      } 
     }], 
     listeners: { 
      scope: this, 
      activate: function(panel) { 
       panel.insert(0, label); 
       panel.doLayout(); 
      } 
     } 
    }] 
}); 
}); 

注：Ext4をまだ使用していないので、追加したコードの一部をExt4用に変更する必要があるかもしれません（doLayoutがなくなったと思います）。

とにかく、私があなたの問題を解決するために考えることができる唯一の2つの方法です。

幸運を祈る！