extjs itemselector 使用详解，前台显示及后台数据交互
这两天折腾这个itemselector，真是折腾的够呛，好多不好弄的地方，网上好多，但是没有讲的详细的，对于初学者不好弄，下面我详细解释下，先看效果图吧：
效果就是这么个效果，下面看代码吧，边看边讲吧。
首先我们要引入js文件和css文件，因为它是相当于一个ext的插件，所以还需要引入js和样式文件，需要引入：
MultiSelect.js ItemSelector.js 主要是这两个js文件，css文件我觉得不用引入也行。引入文件不用我说了吧，呵呵...主要是这两个文件。
然后我写的是两个方法，要不咱们先看个简单的吧，最简单：
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//数据
var ds = 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'
}
});
/*
* Ext.ux.form.ItemSelector Example Code
*/
var isForm = new Ext.form.FormPanel({
title: 'ItemSelector Test',
width:700,
bodyStyle: 'padding:10px;',
renderTo: 'itemselector',
items:[{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 200,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 200,
store: [['10','Ten']],
tbar:[{
text: 'clear',
handler:function(){
isForm.getForm().findField('itemselector').reset();
}
}]
}]
}],
buttons: [{
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));//
这里是获得value的值，取值应该是使用request，名字是itemselector
}
}
}]
});
});
这个是最简单的，静态的一个选择框，做成动态的，下面：
写成了方法
UsersManager.setPosition=function(){
var setWin = new Ext.Window({
title:'选择职位',
width:558,
height:400,
modal: true,// 遮罩
items:[
UsersManager.isForm()
],
buttonAlign:'center',
buttons: [{
text: '确定',
handler: function(){
var form = setWin.get(0).getForm();
if(form.isValid()){
EU.Quest('确定要保存么?', function(status) {
if (status == 'yes') {
form.submit({
url : ROOT+'/system/UserAndPosiAction/doAdd.json?'+setWin.get(0).getForm().getValues(true),
method : 'POST',
params :{userId:grid.selModel.selections.keys},
success : function(form, action) {
setWin.close();
EU.Info('保存成功!');
},
failure : function(form, action) {
EU.Info('操作失败!');
},
clientValidation : false
});
}
});
}
}
},{
text : '取消',
handler : function() {
setWin.close();
}
}]
});
setWin.show();
};
//这里是动态获得数据的，通过ajax从后台获得数据
selectorItems.getFromStore = function (key,form){
Ext.Ajax.request({
url : EU.root + "/system/UserAndPosiAction/doGetAllPosi.json",
method : 'post',
async : false,
params: {userId:key},
success : function(result, request) {
var results = Ext.util.JSON.decode(result.responseText);//获得数据是json格式的
var leftData = results.leftData;
var _tmpLdata = [];
//使用下面这种方法转换成arry格式的
Ext.each(leftData,function(item){
var __tmpldata = [];
__tmpldata.push(item.posiId);
__tmpldata.push(item.posiName);
_tmpLdata.push(__tmpldata);
});
var dsform = new Ext.data.ArrayStore({
data: _tmpLdata,
fields: ['value','text'],
sortInfo: {
field: 'value',
direction: 'ASC'
}
});
//这里是加载 你已经选择的数据
var rgithtData = results.rightData;
var _tmpRdata = [];
Ext.each(rgithtData,function(item){
var __tmprdata = [];
__tmprdata.push(item.posiId);
__tmprdata.push(item.posiName);
_tmpRdata.push(__tmprdata);
});
_tmpRdata.length==0?_tmpRdata = [['1000','普通员工']]:_tmpRdata;
form.add(selectorItems.selectItems(dsform,_tmpRdata,form));
form.doLayout();
},
failure : function(result, request) {
Ext.MessageBox.alert('系统异常', '请求数据失败！');
}
});
};
selectorItems.selectItems=function(lFromData,rFromData,form){
return {
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
drawUpIcon : false,
drawDownIcon : false,
drawLeftIcon : true,
drawRightIcon : true,
drawTopIcon : false,
drawBotIcon : false,
imagePath: EU.root+'/ext/images/selectetor',
multiselects: [{
width: 250,
height: 300,
legend : '所有职位',
store: lFromData,
displayField: 'text',//这里的名字必须是text，因为是源码写死的，如果你想改可以修改源码
valueField: 'value'//这里的value也是写死的
},{
width: 250,
height: 300,
store: rFromData,/
/但是要注意，这里最好是有默认相的时候这样写，如果右面有可能是空的就不要这样写了，是空的时候要给他一个默认的数组，这样获得值的时候取的才是value，要不他取得值可能是text
allowBlank:false,
legend : '所选职位',
tbar:[{
text: 'clear',
handler:function(){
form.getForm().findField('itemselector').reset();
}
}]
}]
};
};
里面可能有些自己封装的js，如果有看不懂的请给我留言，直接复制过去估计是不能用的，大概是这么个意思了，欢迎大家提问。
这里写成方法每次都可以加载上，如果直接写可能第二次打开的时候会没有出现。