ExtJs中OA管理中组织和用户关系左右选择组件的运用
我完成的效果是：
这里点击左边的树是联动右边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的方法。
