Question

我想在ExtJS 4.1中创建一个ItemSelector，但它们似乎没有两个列表的工作“title”属性。这正是我想要的：

http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html

（观察两个标题：“可用”和“选中”）

以下是适用于4.1版本的“相同示例”：

http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html

这就是为什么我下载了extJS 4.1并添加了早期版本（4.0.7）中的ItemSelector和MultiSelect文件。然后我从第一个例子中复制了几乎所有内容，但没有做任何事情，我没有生成错误信息。

请告诉我如何使这样的ItemSelector工作（最好使用ext JS 4.1，因为它是最新版本，从一个弃用的版本开始似乎是错误的，但在这一点上，任何可行的解决方案都会做，因为我用完了想法。

这是我的html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

在此处插入标题

<!-- ExtJS -->
<link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />
<script type="text/javascript" src="bootstrap.js"></script>

<!-- Shared -->
<!--     <link rel="stylesheet" type="text/css" href="../shared/example.css" /> -->

<!-- Example -->
<script type="text/javascript" src="app.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/css/ItemSelector.css" />

和app.js文件：

Ext.Loader.setConfig({enabled: true});
//Ext.Loader.setPath('Ext.ux', './ux');
Ext.require([
    'Ext.form.Panel',
    'Ext.ux.form.MultiSelect',
    'Ext.ux.form.ItemSelector'
]);

 Ext.onReady(function(){
console.log("ready");

/*
 * Ext.ux.form.MultiSelect Example Code
 */
var msForm = Ext.widget('form', {
    title: 'MultiSelect Test',
    width: 400,
    bodyPadding: 10,
    renderTo: 'multiselect',
    items:[{
        anchor: '100%',
        xtype: 'multiselect',
        msgTarget: 'side',
        fieldLabel: 'Multiselect',
        name: 'multiselect',

        allowBlank: false,
        // minSelections: 2,
        // maxSelections: 3,

        store: [[123,'One Hundred Twenty Three'],
                ['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
                ['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],

        value: ['3', '4', '6'],

        ddReorder: true
    }],

    tbar:[{
        text: 'Options',
        menu: [{
            text: 'Set value (2,3)',
            handler: function(){
                msForm.getForm().findField('multiselect').setValue(['2', '3']);
            }
        },{
            text: 'Toggle enabled',
            handler: function(){
                var m = msForm.getForm().findField('multiselect');
                if (!m.disabled) {
                    m.disable();
                } else {
                    m.enable();
                }
            }
        },{
            text: 'Toggle delimiter',
            handler: function() {
                var m = msForm.getForm().findField('multiselect');
                if (m.delimiter) {
                    m.delimiter = null;
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                  'see that values are now submitted as separate parameters.');
                } else {
                    m.delimiter = ',';
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                }
            }
        }]
    }],

    buttons: [{
        text: 'Clear',
        handler: function(){
            var field = msForm.getForm().findField('multiselect');
            if (!field.readOnly && !field.disabled) {
                field.clearValue();
            }
        }
    }, {
        text: 'Reset',
        handler: function() {
            msForm.getForm().reset();
        }
    }, {
        text: 'Save',
        handler: function(){
            if(msForm.getForm().isValid()){
                Ext.Msg.alert('Submitted Values', 'The following will be sent to the server: <br />'+
                    msForm.getForm().getValues(true));
            }
        }
    }]
});

console.log(msForm);


var ds = Ext.create('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 = Ext.widget('form', {
    title: 'ItemSelector Test',
    width: 700,
    bodyPadding: 10,
    renderTo: 'itemselector',

    tbar:[{
        text: 'Options',
        menu: [{
            text: 'Set value (2,3)',
            handler: function(){
                isForm.getForm().findField('itemselector').setValue(['2', '3']);
            }
        },{
            text: 'Toggle enabled',
            handler: function(){
                var m = isForm.getForm().findField('itemselector');
                if (!m.disabled) {
                    m.disable();
                } else {
                    m.enable();
                }
            }
        },{
            text: 'Toggle delimiter',
            handler: function() {
                var m = isForm.getForm().findField('itemselector');
                if (m.delimiter) {
                    m.delimiter = null;
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>null</b>. Click Save to ' +
                                  'see that values are now submitted as separate parameters.');
                } else {
                    m.delimiter = ',';
                    Ext.Msg.alert('Delimiter Changed', 'The delimiter is now set to <b>","</b>. Click Save to ' +
                                  'see that values are now submitted as a single parameter separated by the delimiter.');
                }
            }
        }]
    }],

    items:[{
        xtype: 'itemselector',
        name: 'itemselector',
        anchor: '100%',
        fieldLabel: 'ItemSelector',
        imagePath: '../ux/images/',

        store: ds,
        displayField: 'text',
        valueField: 'value',
        value: ['3', '4', '6'],

        allowBlank: false,
        // minSelections: 2,
        // maxSelections: 3,
        msgTarget: 'side'
    }],

    buttons: [{
        text: 'Clear',
        handler: function(){
            var field = isForm.getForm().findField('itemselector');
            if (!field.readOnly && !field.disabled) {
                field.clearValue();
            }
        }
    }, {
        text: 'Reset',
        handler: function() {
            isForm.getForm().reset();
        }
    }, {
        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));
            }
        }
    }]
});

});

最后，这是我的文件夹结构：

-app.js
-bootstrap.js
-ext-all-debug.js
-NewFile.html
-ux
   -form
         -ItemSelector.js
         -MultiSelector.js
         -layout
              -ItemSelector.js
              -MultiSelect.js
-resources
   -css
         -ext-all.css
         -ItemSelector.css

Answer 1

items:[{
    xtype: 'itemselector',
    name: 'itemselector',
    anchor: '100%',
    fieldLabel: 'ItemSelector',
    imagePath: '../ux/images/',

    store: ds,
    displayField: 'text',
    valueField: 'value',
    value: ['3', '4', '6'],

    allowBlank: false,
    // minSelections: 2,
    // maxSelections: 3,
    fromTitle : 'Available'
    toTitle : 'Selected'
    msgTarget: 'side'
}],

Answer 2

以下是一个工作示例MultiSelect & ItemSelector - 4.1。

确保您的Ext.ux.form.ItemSelector和Ext.ux.form.MultiSelect版本与extjs 4.1来源相同（您可以在extjs-4.1.1/examples/ux/form目录中找到）。

我遇到了同样的问题，MultiSelect.js和ItemSelector.js的更新修复了我的问题。

Answer 3

要使其工作，您可以在应用代码执行之前输入这些覆盖。（这需要使用4.1运行才能在4.0中运行使用Ext.override）

Ext.define('Ext.ux.form.override.MultiSelect', {
    override : 'Ext.ux.form.MultiSelect',

    setupItems : function() {
        var me = this;
        me.boundList = Ext.create('Ext.view.BoundList', {
            deferInitialRefresh : false,
            multiSelect : true,
            store : me.store,
            displayField : me.displayField,
            disabled : me.disabled
        });
        me.boundList.getSelectionModel().on('selectionchange', me.onSelectChange, me);
        //START OVERRIDE
        this.selectedPanel = new Ext.panel.Panel({
            bodyStyle : 'border: 0;',
            layout : 'fit',
            title : me.title,
            tbar : me.tbar,
            items : me.boundList
        });

        return {
            xtype : 'container',
            layout : 'fit',
            items : this.selectedPanel
        };
    }
});

Ext.define('Ext.ux.form.override.ItemSelector', {
    override : 'Ext.ux.form.ItemSelector',

    fromTitle : 'Available',
    toTitle : 'Selected',

    setupItems : function() {
        var items = this.callParent();

        this.fromField.selectedPanel.setTitle(this.fromTitle);
        this.toField.selectedPanel.setTitle(this.toTitle);

        return items;
    }
})

我建议不要在生产中使用此组件。正如您所知，Ext不支持它，它很容易改变。此外，代码非常糟糕，两个组件不能更紧密地耦合。

Answer 4

有些版本的Extjs有Itemselector的错误。这很容易克服。
1.转到Itemselector.js文件并找到setupItems函数 2.此函数使用createList（）函数创建FromField和ToField 3.函数重载：创建另一个函数，就像createList（）一样，并传递一个参数（这是你想要设置的标题），（例如：createList（param））
4.在createList（param）函数中，只需添加title：param
5.现在在你的setupItems函数中，用createList（'Avaiable'）和createList（'Selected'）替换createList（）。
你完成了。

示例代码：

createList: function(param){
    var me = this;
    return Ext.create('Ext.ux.form.MultiSelect', {
            submitValue: false,
            flex: 1,
            dragGroup: me.ddGroup,
            dropGroup: me.ddGroup,
            store: {
                model: me.store.model,
                    data: []
            },
            title: param,
            displayField: me.displayField,
            disabled: me.disabled,
            listeners: {
                boundList: {
                        scope: me,
                        itemdblclick: me.onItemDblClick,
                        drop: me.syncValue  
            }
            }
    });
},

setupItems: function() {
        var me = this;

        me.fromField = me.createList('Available');
        me.toField = me.createList('Selected');

        // add everything to the from field at the start
        me.fromField.store.add(me.store.getRange());

        return {
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            items: [
                me.fromField,
                {
                    xtype: 'container',
                    margins: '0 4',
                    width: 22,
                    layout: {
                        type: 'vbox',
                        pack: 'center'
                    },
                    items: me.createButtons()
                },
                me.toField
            ]
        };
    },

感谢。

Ext JS 4 ItemSelector示例

4 个答案: