0

次のような Ext JS フォームに複数選択コントロールがあります。

ここに画像の説明を入力

「使用可能」と「選択済み」の 2 つの凡例を変更するにはどうすればよいですか?

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

2 に答える 2

2

フォーム パネルで itemselector を作成するときに、config を使用して構成できます。目的の結果を得るために変更する方法は次のとおりです。

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

凡例プロパティを使用すると、フィールドセットのタイトルを変更できます。ここで、コンポーネントの初期レンダリング後にこれらを設定する予定がある場合。結果は次のようになります。ここに画像の説明を入力

于 2011-03-10T09:34:26.313 に答える
1

"//ICON HELL!!"Ext.ux.form.ItemSelector.onRender のコードを見ると、すべての ICON HELL を実際にコピーせずに itemSelectors の onRender メソッドを Ext.override'ing するのがうまくいかないコメントに気付きました。

最善の方法は、renderまたはafterrenderイベント リスナーを ItemSelector に追加し、そこで ItemSelector の MultiSelect コンポーネント内のフィールドセット インスタンスにアクセスして、タイトルを変更することです。

しかし、考えてみると... この 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));
                }
            }
        }]
    });

});
于 2011-03-10T09:23:00.360 に答える