javascript Ext JS 4 ItemSelector 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10816188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ext JS 4 ItemSelector example
提问by Dragos
I wanted to create an ItemSelector in ExtJS 4.1, but they don't seem to have a working "title" property for the two lists. Here is exactly what I want:
我想在 ExtJS 4.1 中创建一个 ItemSelector，但它们似乎没有两个列表的有效“title”属性。这正是我想要的：
http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html
http://dev.sencha.com/deploy/ext-4.0.0/examples/multiselect/multiselect-demo.html
(observe the two titles: "available" and "selected")
（注意两个标题：“available”和“selected”）
and here is "the same example" applied for the 4.1 version:
这是适用于 4.1 版本的“相同示例”：
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html
http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/multiselect/multiselect-demo.html
That is why I have downloaded extJS 4.1 and added the ItemSelector and MultiSelect files from an earlier version(4.0.7). Then I have copied almost everything from the first example, but nothing is done and I gen no error message.
这就是为什么我下载了 extJS 4.1 并添加了早期版本 (4.0.7) 的 ItemSelector 和 MultiSelect 文件的原因。然后我复制了第一个示例中的几乎所有内容，但什么也没做，也没有生成任何错误消息。
Please tell me how I should make such an ItemSelector work(preferably using ext JS 4.1, since it's the latest version and it seems wrong to start with a deprecated version, but at this point, any working solution will do, since I ran out of ideas).
请告诉我我应该如何使这样的 ItemSelector 工作（最好使用 ext JS 4.1，因为它是最新版本，从不推荐使用的版本开始似乎是错误的，但在这一点上，任何可行的解决方案都可以，因为我用完了想法）。
Here is my html file:
这是我的 html 文件：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Insert title here
在此处插入标题
<!-- 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" />
and the app.js file:
和 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));
}
}
}]
});
});
and finally, this is my folder structure:
最后，这是我的文件夹结构：
-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
回答by sanyukta
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'
}],
回答by Alexander M.
Here is a working example MultiSelect & ItemSelector - 4.1.
这是一个工作示例MultiSelect & ItemSelector-4.1。
Make sure that your version of Ext.ux.form.ItemSelectorand Ext.ux.form.MultiSelectare the same as in extjs 4.1sources (you can find in extjs-4.1.1/examples/ux/formdirectory).
确保您的版本Ext.ux.form.ItemSelector和Ext.ux.form.MultiSelect与extjs 4.1源中的版本相同（您可以在extjs-4.1.1/examples/ux/form目录中找到）。
I had the same problem and update of MultiSelect.jsand ItemSelector.jsfixed my problems.
我遇到了同样的问题，更新MultiSelect.js并ItemSelector.js解决了我的问题。
回答by pllee
To get it to work you can put in these overrides before your app code executes. (this needs to be run with 4.1 to have it run in 4.0 use Ext.override)
为了让它工作，你可以在你的应用程序代码执行之前放入这些覆盖。（这需要在 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;
}
})
I would advise against using this component in production. As you already know it is not supported by Ext and it is prone to change. Also the code is pretty bad and the two components can't be more tightly coupled.
我建议不要在生产中使用这个组件。正如您已经知道的那样，Ext 不支持它，而且它很容易发生变化。代码也很糟糕，两个组件不能更紧密地耦合。
回答by anantchoubey
There are some versions of Extjs having bug with Itemselector. This is fairly easy to overcome.
1. Go to your Itemselector.js file and find setupItems function.
2. This function uses createList() function to create FromField and ToField.
3. Function Overloading : Create another function just like createList() and pass it a parameter (this is the title you want to set), ( eg : createList(param) )
4. In createList(param) function, just add title: param
5. Now in your setupItems function replace createList() with createList('Avaiable') and createList('Selected').
6. You are DONE.
某些版本的 Extjs 存在 Itemselector 的错误。这很容易克服。
1. 转到您的 Itemselector.js 文件并找到 setupItems 函数。
2. 该函数使用createList() 函数创建FromField 和ToField。
3. 函数重载：创建另一个函数，就像 createList() 并传递一个参数（这是您要设置的标题），（例如：createList(param)）
4. 在 createList(param) 函数中，只需添加标题：参数
5. 现在在您的 setupItems 函数中用 createList('Avaiable') 和 createList('Selected') 替换 createList()。
6. 大功告成。
Example Code :
示例代码：
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
]
};
},
Thanks.
谢谢。
