如何在Ext JS ItemSelector/Multiselect控件中設置圖例？

Question

我有一個Ext JS的形式，看起來像這樣以下multiselect control：

我怎樣才能改變這兩個傳說「可用」和「選擇」？

我的文件ItemSelect.js中所看到的，我可以設置這些曾經在內部：

但如何從調用代碼設置這些傳說標籤，這樣每次我把這種控制，我可以給它新的傳說名稱，例如是這樣的：

msConfig[0].legend = 'verfügbar'; 
msConfig[1].legend = 'ausgewählt'; 

調用代碼：

}, { 
    xtype: 'itemselector', 
    name: 'itemselector', 
    fieldLabel: 'ItemSelector', 
    width: 700, 
    imagePath: 'images/multiselect/', 
    multiselects: [{ 
      width: 250, 
      height: 200, 
      store: new Ext.data.ArrayStore({ 
       data: [[123,'One Hundred Twenty Three'], 
        ['1', 'Two'], ['2', 'One'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], 
        ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], 
       fields: ['value','text'], 
       sortInfo: { 
        field: 'value', 
        direction: 'ASC' 
       } 
      }), 
      displayField: 'text', 
      valueField: 'value' 
     },{ 
      width: 250, 
      height: 200, 
      store: [['10','Ten'],['11','Eleven'],['12','Twelve']], 
      tbar:[{ 
        text: 'clear', 
        handler:function(){ 
         simple_form.getForm().findField('itemselector').reset(); 
        } 
       }] 
     }] 
}, 

Answer 1

那麼，它可以通過配置，當你在窗體面板中創建itemselector配置。以下是我如何修改以獲得所需結果：

multiselects: [{ 
    legend: 'XYZ', 
    width: 250, 
    height: 200, 
    store: ds, 
    displayField: 'text', 
    valueField: 'value' 
},{ 
    legend: 'ABC', 
    width: 250, 
    height: 200, 
    store: [['10','Ten']], 
    tbar:[{ 
     text: 'clear', 
     handler:function(){ 
      isForm.getForm().findField('itemselector').reset(); 
     } 
    }] 
}] 

通過使用圖例屬性，您將能夠修改字段集的標題。現在，如果您打算在組件的初始渲染之後設置它們。以下是結果的外觀：

Answer 2

望着Ext.ux.form.ItemSelector.onRender的代碼，我注意到評論"//ICON HELL!!"不爲Ext.override好兆頭'itemSelectors上的onRender方法，而不實際複製所有的ICON HELL。

最好的方法是將render或afterrender事件偵聽器添加到您的ItemSelector中，然後嘗試訪問ItemSelector中MultiSelect組件中的fieldset實例並更改標題。

但是來想一想...這個ItemSelector組件需要一些緊急的重構，並且這應該可以通過配置默認配置。

無論如何，試試這個......你可以通過將它放在ExtJS3下載的默認multselect例子中來運行它。 注意渲染監聽器和標題配置選項我添加到多選。

/*! 
* Ext JS Library 3.3.1 
* Copyright(c) 2006-2010 Sencha Inc. 
* licensing@sencha.com 
* http://www.sencha.com/license 
*/ 
Ext.onReady(function(){ 

    Ext.QuickTips.init(); 
    Ext.form.Field.prototype.msgTarget = 'side'; 

    var ds = new Ext.data.ArrayStore({ 
     data: [[123,'One Hundred Twenty Three'], 
      ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'], 
      ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']], 
     fields: ['value','text'], 
     sortInfo: { 
      field: 'value', 
      direction: 'ASC' 
     } 
    }); 

    /* 
    * Ext.ux.form.ItemSelector Example Code 
    */ 
    var isForm = new Ext.form.FormPanel({ 
     title: 'ItemSelector Test', 
     width:700, 
     bodyStyle: 'padding:10px;', 
     renderTo: 'itemselector', 
     items:[{ 
      xtype: 'itemselector', 
      name: 'itemselector', 
      fieldLabel: 'ItemSelector', 
      imagePath: '../ux/images/', 
      multiselects: [{ 
       width: 250, 
       height: 200, 
       store: ds, 
       displayField: 'text', 
       valueField: 'value', 
       title: 'Left' 
      },{ 
       width: 250, 
       height: 200, 
       store: [['10','Ten']], 
       tbar:[{ 
        text: 'clear', 
        handler:function(){ 
         isForm.getForm().findField('itemselector').reset(); 
        } 
       }], 
       title: 'Right' 
      }], 
      listeners: { 
       render: function(iSelector){ 
        iSelector.fromMultiselect.fs.header.update(this.initialConfig.multiselects[0].title); 
        iSelector.toMultiselect.fs.header.update(this.initialConfig.multiselects[1].title); 
       } 
      } 
     }], 

     buttons: [{ 
      text: 'Save', 
      handler: function(){ 
       if(isForm.getForm().isValid()){ 
        Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+ 
         isForm.getForm().getValues(true)); 
       } 
      } 
     }] 
    }); 

});