原文 http://www.cnblogs.com/shijiewutonghua/archive/2013/03/29/2989236.html
我完成的效果是：
这里点击左边的树是联动右边itemselector 组件中的用户，并且带有用户搜索
一：废话不多，贴上js代码:
var addUsersWin,addUsersFun = function (data) {
userSelectStore.load();
userSelectStoreOwn.load();
addUsersWin =
new
Ext.Window({
title:
"添加员工"
,
width:780,
height:480,
buttonAlign:
'center'
,
modal:
true
,
items:[
{
xtype:
'form'
,
plain:
true
,
url:
'system/addOrganizationUser.json'
,
labelWidth:80,
baseCls:
"x-plain"
,
bodyStyle:
"padding:8px"
,
labelAlign:
'right'
,
frame:
true
,
items: [{
layout:
'column'
,
height:50,
border :
false
,
bodyCssClass :
"queryForm"
,
defaults : {
layout :
'form'
,
border :
false
,
bodyCssClass:
"queryForm"
,
defaults : {
anchor :
'95%'
,
xtype :
"textfield"
}
},
items:[
{
columnWidth:0.7,
//layout: 'form',
items: [{
xtype:
'textfield'
,
name:
"filter['name']"
,
id:
'userName'
,
fieldLabel:
'用户姓名'
}]
},
{
columnWidth:0.08,
//layout: 'form',
items: [
{
xtype:
'button'
,
text:
'查询'
,
iconCls:
'findItem'
,
handler: function(){
var un= Ext.getCmp(
'userName'
).getValue();
userSelectStore.baseParams={
name:un
};
userSelectStore.load();
}
}
]
}
]
},{
layout:
'column'
,
height:300,
items:[
{
columnWidth:0.3,
layout:
'form'
,
items: [{
xtype:
'treepanel'
,
region:
'west'
,
split:
true
,
width: 200,
height: 300,
margins:
'0 4 0 0'
,
enableDD:
true
,
containerScroll:
true
,
border:
false
,
rootVisible:
false
,
autoScroll:
true
,
root: {
nodeType:
'async'
},
loader:
new
Ext.tree.TreeLoader({
dataUrl:
'system/organization/resourceTree.json?type=1'
,
baseAttrs: {uiProvider: Ext.ux.TreeCheckNodeUI}
}),
listeners: {
checkchange: function(node,
checked
){
node.expand();
node.attributes.
checked
=
checked
;
node.eachChild(function(child) {
child.ui.toggleCheck(
checked
);
child.attributes.
checked
=
checked
;
child.fireEvent(
'checkchange'
, child,
checked
);
})
},
afterRender: function (t) {
treeP = t;
treeP.root.expand(
true
);
},
click:function(node){
if
(node.id!=
'root'
){
userSelectStore.baseParams={
id:node.id
};
userSelectStore.load();
}
}
}
}]
},
{
columnWidth:0.7,
layout:
'form'
,
items: [
{
xtype:
'itemselector'
,
name:
'userIds'
,
imagePath:
'images/ext/ux/images/'
,
availableTitle:
'可选用户'
,
selectedTitle:
'已选用户'
,
multiselects:[
{
width:200,
height:300,
store:userSelectStore,
displayField:
'name'
,
valueField:
'id'
},
{
width:200,
height:300,
displayField:
'name'
,
valueField:
'id'
,
store:userSelectStoreOwn
}
]
}
]
}
]
}
]
}
],
buttons:[
{
text:
'确定'
,
handler:function () {
var fromPanel = addUsersWin.
get
(0);
if
(!fromPanel.getForm().isValid()) {
Ext.Msg.alert(
"提示"
,
"请按相关提示正确填写"
);
return
;
}
fromPanel.form.submit({
params
:{id:data.id},
waitMsg:
'正在处理中...'
,
failure:function (form, action) {
Ext.Msg.alert(
'错误消息'
,
"修改失败,请联系技术人员!"
);
},
success:function (form, action) {
Ext.MessageBox.alert(
'消息提示'
,
'添加成功!'
);
frameworkGridStore.reload();
addUsersWin.destroy();
}
});
}
},
{
text:
'取消'
,
handler:function () {
addUsersWin.destroy();
}
}
]
});
addUsersWin.show();
}
|
二：这里我们先看表单中， xtype:'itemselector',组件，要用到，需要引入两个js： ItemSelector.js 和 MultiSelect.js
这样 itemselector组件就可以用了，其中左边加载的数据：可选用户：userSelectStore
var userSelectStore =
new
Ext.data.JsonStore({
url:
'system/getAllUserList.json'
,
idProperty:
'id'
,
fields:[
'id'
,
'name'
],
root:
'userList'
,
paramNames : {
id:
''
,
name:
''
}
});
|
右边部分加载的数据：已选用户：userSelectStoreOwn
var userSelectStoreOwn =
new
Ext.data.JsonStore({
url:
'system/getOrganizationUserList.json'
,
idProperty:
'id'
,
fields:[
'id'
,
'name'
],
root:
'userList'
});
|
三：接着我们来看一下整个window弹出窗中，左边treePanel的绑定的事件：
click:function(node){
if
(node.id!=
'root'
){
userSelectStore.baseParams={
id:node.id
};
userSelectStore.load();
}
}
|
通过 click事件，我们可以根据树节点的 id去加载 itemselector组件左边，可选用户的数据.
四：最后，我们在做搜索的时候：
xtype:
'button'
,
text:
'查询'
,
iconCls:
'findItem'
,
handler: function(){
var un= Ext.getCmp(
'userName'
).getValue();
userSelectStore.baseParams={
name:un
};
userSelectStore.load();
}
|
我们是把输入框input中的值作为itemselector左边可选用户的数据加载的参数，去加载可选用户。
五：最后说一下itemselector这个组件，在表单中是通过name:'userIds',把多个的id的字符串传给java后台的，处理时候，只要切割逗号的字符串，就行了。这个组件的js目前只封装好了，传valueField的值过去，
如果想要显示值是displayField，要在源码中自己仿照getValue()方法写获得displayField的方法。
