问题
I am trying to set up a multiselect item selector based on this sencha example code.
However, after building it into my environment, I get this error:
What could be causing this error and how might I fix it?
Addendum
I have found that when I comment out this line:
//xtype: 'itemselector',
then it works. Why would the xtype "itemselector" not work?
Strange also that I have found this list of valid ExtJS xtypes and itemselector is not on it. How could the Sencha example work if "itemselector" is not a valid xtype?
Addendum 2
So I found that the demo accesses these two files:
<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>
The demo is listed under Ext JS 3.3 Samples, and I downloaded Ext JS 3.3, yet the only file I have under a "ux" directory is:
My plan is to download these javascript files directly from the sample but: What am I missing about the itemselector example that makes me have to patch this together to work like this?
After adding these two files I get an error:
So it seems to be a 3.3.0 / 3.3.1 issue, since these two missing .js files are labeled as 3.3.1:
Just strange they are not listed in the Ext JS 3.3.1 Release Notes.
I downloaded 3.3.1 and the example works locally so I know that I have all the files. So I am trying again to fit this into my application's environment, I fixed the Ext.EventManager error by copying in the ux-all-debug.js:
But I'm still getting this error:
I can't update the Ext JS that my application is using since so many controls depend on the old file structure. How can I find out what it is missing, e.g. how to allow it to use this 'itemselector' xtype?
Full code:
<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>
回答1:
The multiselect is a user extension (hence being in the UX package), so you have to download the source separately because it is not part of the core.
They do this with other plugins too (for example, checkcolumn) because they are not written by the ExtJS team and hence not fully tested/endorsed.
You can get the CSS for the multi-select here:
http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css
And the JS for the itemselector and multiselect here:
http://dev.sencha.com/deploy/dev/examples/ux/MultiSelect.js http://dev.sencha.com/deploy/dev/examples/ux/ItemSelector.js
EDIT: Sorry, didn't read the entirety of your question. I would advise updating your ExtJS to version 3.3.1 like you suggested, that is probably the best place to start.
来源：https://stackoverflow.com/questions/5243944/why-are-the-ext-js-multiselect-item-selector-files-not-included-in-the-ext-js-3