javascript - 如何在 Ext JS ItemSelector/Multiselect 控件中设置图例？

Question

我在 Ext JS 表单中有以下多选控件，如下所示：

如何更改“可用”和“已选择”这两个图例？

我在文件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

好吧，当您在表单面板中创建项目选择器时，它可以通过配置进行配置。以下是我如何修改以获得所需的结果：

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();
        }
    }]
}]

通过使用 legend 属性，您将能够修改字段集的标题。现在，如果您打算在组件的初始渲染之后设置这些。结果如下所示：

Answer 2

查看 Ext.ux.form.ItemSelector.onRender 的代码，我注意到注释"//ICON HELL!!"对于 Ext.override 在 itemSelectors 上的 onRender 方法并没有实际复制所有 ICON HELL 来说不是好兆头。

您可以采用的最佳方法是向您的 ItemSelector 添加一个render或afterrender事件侦听器，并在其中尝试访问 ItemSelector 中 MultiSelect 组件中的字段集实例并更改标题。

但是想一想……这个 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));
                }
            }
        }]
    });

});