ext表格

//工作人员
var ds_user = new Ext.data.Store({
baseParams : {
"type" : 2
},
url : "/cbmUser.action",
reader : new Ext.data.JsonReader({
root : "datas",
totalProperty : "totalCount"
}, [{
name : "id"
}, {
name : "loginName"
}, {
name : "commonName"
}, {
name : "paperID"
}, {
name : "unitName"
}])
});
//用户
var ds_item = new Ext.data.Store({

url : "find.action",
reader : new Ext.data.JsonReader({
root : "datas",
totalProperty : "totalCount"
}, [{
name : "id"
}, {
name : "loginName"
}, {
name : "state"
}, {
name : "localityName"
}])
});

//构建用户模块的checkbox模型
var sm_item = new Ext.grid.CheckboxSelectionModel();

//创建已选择的用户的记录
var selectUser = Ext.data.Record.create([{
name : 'id',
type : 'string'
}, {
name : 'name',
type : 'string'
}, {
name : 'state',
type : 'string'
}]);

//为用户模块添选择事件，并把选中的行的值添加到右边（checkedUserPanel）的列表
sm_item.on("rowselect", function(sm, rowIndex, record) {
var store = Ext.getCmp("selectedUser").store;
var no = store.find("id", record.get("id"));
if (no < 0) {
store.add(new selectUser({
id : record.get("id"),
name : record.get("loginName"),
state : record.get("state")
}));
}
});

//为用户模块添反选事件，并把选中的行的值从右边（checkedUserPanel）列表中移除
sm_item.on("rowdeselect", function(sm, rowIndex, record) {
var store = Ext.getCmp("selectedUser").store;
var no = store.find("id", record.get("id"));
var recorded = store.getAt(no);
store.remove(recorded)
});

//构建用户模块的列名，并填充相应的数据
var cm_item = new Ext.grid.ColumnModel([sm_item, {
header : "ID",
width : 100,
dataIndex : "id",
sortable : true
}, {
header : "用戶名",
width : 100,
dataIndex : "loginName",
sortable : true
}, {
header : "状态",
width : 100,
dataIndex : "state",
renderer : stateDesc,
sortable : true
}, {
header : "所属机构",
width : 160,
dataIndex : "localityName",
sortable : true
}]);

//构建combox工作人员
var storeList = new Ext.form.ComboBox({
store : ds_user,
fieldLabel : "工作人员",

valueField : 'id', // option.value
typeAhead : true,
hiddenName:"task.owner.id",
name:'task.owner.id',
displayField :'loginName', // option.text
triggerAction : 'all',
emptyText : '选择一个工作人员...',
mode : 'local',
selectOnFocus : true,
width : 135,
listeners:{
"change":function(){

//alert(storeList.getValue());

}

}
});

//构建搜索框
var s_cmb = new Ext.form.ComboBox({
id : 'cmb',
store : new Ext.data.SimpleStore({
fields : ["condition", "value"],
data : [[0, "按用户名搜索"], [1, "按状态搜索"], [2, "按单位名称搜索"]]
}),
fieldLabel:'搜索方式',
valueField : 'condition', // option.value
typeAhead : true,
hiddenName : "condition",
name : 'condition',
displayField : 'value', // option.text
triggerAction : 'all',
emptyText : '选择查找方式...',
mode : 'local',
listeners : {
"select" : function(s_cmb, record, index) {
// alert(Ext.getCmp("input").getValue());
url:'find.action'
ds_item.baseParams.condition = Ext.getCmp("cmb").value;
ds_item.baseParams.id = Ext.getCmp("input").getValue();
ds_item.load({
url : "/dzqm/scripts/task/detail.js",
waigMsg : "数据查找中，请稍候。。。 ",
params : {
start : 0,
limit : 10
}
})

}
}
});

//组装查询输入文本框跟搜索框
var searchForm = new Ext.form.FormPanel({
// height:300,
width:500,
defaultType : 'textfield',
layout : 'column',
items : [{
fieldLabel : "查找条件",
name : "id",
id : 'input'
}, s_cmb]
});

//搜索form加入到panel
var searchPanel = new Ext.Panel({
layout : 'column',
width :500,
height:26,
items : searchForm
});

//组装用户的表格
var selectUserPanel =new Ext.grid.GridPanel({
id : "selectUserGrid",
title : "用户",
height : 300,
width : 500,
store : ds_item,//结果集
cm : cm_item,//ColumnModel
sm : sm_item,//CheckboxSelectionModel

//分页
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds_item,
displayInfo : true,
displayMsg : "当前显示 {0} - {1} 条    共计 {2} 条",
emptyMsg : "没有显示数据"
})
})


//把搜索panel跟任务设置Panel组装到同一FormPanel
var taskDetailForm = new Ext.form.FormPanel({

labelWidth : 60,
bodyStyle : "padding: 30px;",
autoHeight : true,
method : "post",
defaultType : "textfield",

items : [{
xtype : 'fieldset',
title : '任务设置',
collapsible : true,
autoHeight : true,
bodyStyle : 'padding:5px 5px 0;',
defaultType : 'textfield',
items : [storeList, new Ext.form.DateField({
fieldLabel : '起始时间',
name : 'task.start',
format:"Y-m-d",
width : 190,
allowBlank : false
}), new Ext.form.DateField({
fieldLabel : '结束时间',
format:"Y-m-d",
name : 'task.end',
width : 190,
allowBlank : false
})]
}, {
xtype : 'fieldset',
title : '用户列表',
collapsible : true,
autoHeight : true,
width:800,
height:890,
bodyStyle : 'padding:5px 5px 0;',
defaultType : 'textfield',
items : [{
fieldLabel : "查找条件",
name : "id",
id : 'input'
}, s_cmb,selectUserPanel]

}],
buttons : [{
text : "保存",
handler : function() {
var array = new Array();
array = userData();//取得右边选中用户的数组
taskDetailForm.getForm().submit({
url : "taskSave.action?users="+array,//提交到相应的Action
waitMsg : "数据存储中，请稍侯...",
success : function(frm, action) {
Ext.Ajax.request({
url : "/dzqm/scripts/task/detailView.js",
success : function(result, request) {
Ext.getCmp("selectedUser").destroy();//销毁右边的面板
Ext.get("main").dom.innerHTML = "";
eval(result.responseText);
taskDetailPanel.render(Ext.get("main"));

}

});
},
failure:function(frm,action){
Ext.MessageBox.hide();
Ext.MessageBox.show({
title:'保存',
msg:"数据保存失败",
buttons:Ext.Msg.OK
});
}
});
}
}, {
text : "重置",
handler : function() {
taskDetailForm.getForm().reset();
}
}]

});

//整个中间的TabPanel,包含了任务设置，用户列表
var taskDetailPanel = new Ext.TabPanel({
activeTab : 0,
items : [new Ext.Panel({
title : "新建任务",
autoScroll : true,
height : 400,
items : taskDetailForm
})]
});

//构建选中用户的Store
var ds_selected = new Ext.data.Store({
reader : new Ext.data.JsonReader({
root : "datas"
}, [{
name : "id"
}, {
name : "name"
}, {
name : "state"
}]),

listeners : {
"add" : function(store, records, options) {
// store.reload;
}
}
});

//构建选中用户列名，并添加相应的值
var cm_selected = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header : "ID",
width : 40,
dataIndex : "id",
sortable : true
}, {
header : "用户名",
width : 50,
dataIndex : "name",
sortable : true
}, {
header : "状态",
width : 50,
dataIndex : "state",
sortable : true
}]);

//取得右边选中的用户
function userData(){
var store = Ext.getCmp("selectedUser").store;//取得checkedUserPanel面板的Store

var array = new Array();

var total = store.getCount();//取Store里面的总条数

for(var i = 0 ; i < total; i++){

var record =store.getAt(i);//得到每一行数据
var temValue = "";
temValue = record.get("id");//根据相应的列名得到对应的值

array[i]=temValue;

}
return array;
}

//构建表格面板
var checkedUserPanel = new Ext.grid.GridPanel({
cm : cm_selected,//ColumnModel
ds : ds_selected,//结果集
id : 'selectedUser',
title : '已分配用户',
// width:200,
height : 420,
autoScoll : true,

//分页
bbar : new Ext.PagingToolbar({
pageSize : 2,
store : ds_selected,
displayInfo : true,
displayMsg : "当前显示 {0} - {1} 条    共计 {2} 条",
emptyMsg : "没有显示数据"
}),
//添加双击事件
listeners : {
"rowdblclick" : function(grid, rowIndex, e) {
var record = grid.getStore().getAt(rowIndex)//得到选中行的记录
selectGrid = Ext.getCmp("selectUserGrid"); //根据面板的ID得到相应的面板
var no = selectGrid.store.find("id", record.get("id"));//根据列名找到所对应的记录
var sm = selectGrid.getSelectionModel();//得到SelectedModel
sm.deselectRow(no)//移除所双击的行

}
}

});
//把面板添加到右边
checkedUserPanel.render(Ext.get("right"));
checkedUserPanel.doLayout();

//加载用户的结果集
ds_user.load({
params : {
start : 0,
limit : 10
}
});

ds_item.load({
params : {
start : 0,
limit : 10
}
});