同一項目在多個選項卡中的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），這就是爲什麼你可以使用「mylabel」作爲的xtype

這樣你可以重用組件

，這樣

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：假的吧

您可以通過創建自定義標籤類在這裏獲得最大的代碼重用，像laurac公佈。你仍然需要保持同步標籤文本，所以你要當對方的文本更改爲需要更新一個：

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消失了？）。

無論如何，這些是我能想到解決您的問題的唯一方法。

祝你好運！