我正在尝试根据 this sencha example code 设置一个多选项目选择器 .
但是，在将它构建到我的环境中之后，我得到了这个错误:
是什么导致了这个错误，我该如何解决？
附录
我发现当我注释掉这一行时:
//xtype: 'itemselector',
然后就可以了。 为什么 xtype“itemselector”不起作用？
奇怪的是我找到了this list of valid ExtJS xtypes itemselector 不在上面。 如果“itemselector”不是有效的 xtype，Sencha 示例如何工作？
附录 2
于是我发现demo访问了这两个文件:
<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 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>
最佳答案
多选是一个用户扩展(因此位于 UX 包中)，因此您必须单独下载源代码，因为它不是核心的一部分。
他们也对其他插件(例如，checkcolumn)执行此操作，因为它们不是由 ExtJS 团队编写的，因此没有经过全面测试/认可。
您可以在此处获取多选的 CSS:
http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css
这里是 itemselector 和 multiselect 的 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，这可能是最好的起点。
关于javascript - 为什么 Ext JS 多选项目选择器文件没有包含在 Ext JS 3.3 下载中，它们在哪里？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5243944/