如何在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 on on onRender方法没有好处，而没有实际复制所有的ICON HELL结束。

您可以采用的最佳方式是在ItemSelector中添加render或afterrender事件侦听器，然后尝试访问ItemSelector中MultiSelect组件中的fieldset实例并更改标题。 / p>

但是想到它......这个ItemSelector组件需要一些紧急的重构，这应该可以通过配置默认配置。

无论如何，尝试这个...你可以通过将它放在ExtJS3下载附带的默认多选示例中来运行它。 请注意渲染侦听器和标题配置选项我添加到多选。

/*!
 * 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));
                }
            }
        }]
    });

});