为什么Ext JS多选项目选择器文件不包含在Ext JS 3.3下载中，它们在哪里？

Question

我正在尝试根据this sencha example code设置多选项目选择器。

然而，在将其构建到我的环境之后，我收到此错误：

可能导致此错误的原因以及我该如何解决？

附录

我发现当我注释掉这一行时：

//xtype: 'itemselector',

然后它的工作原理。 为什么xtype“itemselector”不起作用？

奇怪的是，我发现this list of valid ExtJS xtypes并且 itemselector 不在其上。 如果“itemselector”不是有效的xtype，那么Sencha示例如何工作？

附录2

所以我发现演示可以访问这两个文件：

<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>

该演示列在 Ext JS 3.3 Samples 下，我下载了 Ext JS 3.3 ，但我在“ux”目录下的唯一文件是：

我的计划是直接从示例中下载这些javascript文件，但是：我错过了关于itemselector示例的内容，这使得我必须将它们一起修补才能像这样工作？

添加这两个文件后，我收到一个错误：

所以它似乎是一个3.3.0 / 3.3.1问题，因为这两个丢失的.js文件被标记为3.3.1：

奇怪的是，它们没有列在Ext JS 3.3.1 Release Notes。

中

我下载了3.3.1并且该示例在本地工作，因此我知道我拥有所有文件。所以我再次尝试将其融入我的应用程序环境中，我通过复制ux-all-debug.js修复了Ext.EventManager错误：

但我仍然收到这个错误：

我无法更新我的应用程序正在使用的Ext JS，因为很多控件依赖于旧的文件结构。 如何找出丢失的内容，例如：如何允许它使用这个'itemselector'xtype？

完整代码：

<script type="text/javascript">

    clearExtjsComponent(targetRegion);

    var multiselectDataStore = 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'
        }
    });

    var simple_form = new Ext.FormPanel({
        labelWidth: 75,
        frame:true,
        style: 'margin: 10px',
        title: 'Simple Form',
        bodyStyle:'padding:5px 5px 0',
        width: 700,
        defaults: {width: 230},
        defaultType: 'textfield',

        items: [{
                fieldLabel: 'Item 1',
                name: 'item1',
                allowBlank:false,
                value: 'sfsfdsf'
            },{
                fieldLabel: 'Item 2',
                labelStyle: 'color:red',
                style: 'color:red',
                name: 'item2'
            },{
                fieldLabel: 'Item 3',
                name: 'item3',
                value: 'nnnnn',
                xtype: 'displayfield'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype:'email'
            }, {
                xtype: 'itemselector',
                name: 'itemselector',
                fieldLabel: 'ItemSelector',
                imagePath: '../ux/images/',
                multiselects: [{
                        width: 250,
                        height: 200,
                        store: multiselectDataStore,
                        displayField: 'text',
                        valueField: 'value'
                    },{
                        width: 250,
                        height: 200,
                        store: [['10','Ten']],
                        tbar:[{
                                text: 'clear',
                                handler:function(){
                                    simple_form.getForm().findField('itemselector').reset();
                                }
                            }]
                    }]
            },

            new Ext.form.TimeField({
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            }), {
                width:          100,
                xtype:          'combo',
                mode:           'local',
                value:          'en',
                triggerAction:  'all',
                forceSelection: true,
                editable:       false,
                fieldLabel:     'Produkt',
                name:           'language',
                hiddenName:     'language',
                displayField:   'name',
                valueField:     'value',
                store:          new Ext.data.JsonStore({
                    fields : ['name', 'value'],
                    data   : [
                        {name : 'German',   value: 'de'},
                        {name : 'Broschüre',  value: 'en'},
                        {name : 'French', value: 'fr'}
                    ]
                })
            },{
                xtype: 'radiogroup',
                fieldLabel: 'Status',
                columns: 1,
                vertical: true,
                items: [
                    {boxLabel: 'Low', name: 'rb-vert', inputValue: 1},
                    {boxLabel: 'Medium', name: 'rb-vert', inputValue: 2},
                    {boxLabel: 'High', name: 'rb-vert', inputValue: 3, checked: true},
                    {boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4},
                    {boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5}
                ]
            }


        ],
        buttons: [{
                text: 'Save',
                handler: function() {
                    if(simple_form.getForm().isValid()){
                        simple_form.getForm().getEl().dom.action = 'save_form.php';
                        simple_form.getForm().getEl().dom.method = 'POST';
                        simple_form.getForm().submit({
                            success : function(form, action) {
                                changeMenuItemInfoArea(start_info_panel2, 'Data was saved2, check file: output.txt (this is a new component)');
                                simple_form.hide();
                            }
                        })
                    } else {
                        Ext.Msg.minWidth = 360;
                        Ext.Msg.alert('Invlaid Form', 'Some fields are invalid, please correct.');
                    }
                }
            },{
                text: 'Cancel',
                handler: function(){
                    Ext.Msg.alert('Notice', 'Cancel was pressed.');
                }
            }]
    });

    replaceComponentContent(targetRegion, simple_form);


    var start_info_panel2 = new Ext.Panel({
        id: 'info_panel',
        padding: 10,
        margins: 10,
        style: "margin: 10px",
        width: 300,
        html: '<p id="test">This is some information about the form.<p>',
        border: false
    });
    replaceComponentContent(targetRegion, start_info_panel2);

    hideComponent(regionHelp);

</script>

Answer 1

multiselect是用户扩展（因此在UX包中），因此您必须单独下载源，因为它不是核心的一部分。

他们也使用其他插件执行此操作（例如，checkcolumn），因为它们不是由ExtJS团队编写的，因此未经过完全测试/认可。

您可以在此处获取多选的CSS：

http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css

这里有项目选择器和多选的JS：

http://dev.sencha.com/deploy/dev/examples/ux/MultiSelect.js http://dev.sencha.com/deploy/dev/examples/ux/ItemSelector.js

编辑：对不起，没有看完你的全部问题。我建议你像你建议的那样将你的ExtJS更新到版本3.3.1，这可能是最好的起点。