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

Question

我正在尝试基于 多选项目选择器 “nofollow noreferrer”>此 sencha 示例代码。

但是，将其构建到我的环境中后，我收到此错误：

可能导致此问题的原因错误以及如何修复它？

附录

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

//xtype: 'itemselector',

然后它就可以工作了。 为什么xtype“itemselector”不起作用？

奇怪的是我发现有效的 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 示例，我下载了 Ext JS 3.3，但“ux”目录下的唯一文件是：

我的计划是直接从示例下载这些 javascript 文件，但是： 我缺少什么itemselector 示例让我必须将其修补在一起才能像这样工作？

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

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

只是奇怪，它们没有在 Ext JS 3.3.1 发行说明。

我下载了 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

多重选择是一个用户扩展（因此位于 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，这可能是最好的起点。