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} 条&nbsp;&nbsp;&nbsp;&nbsp;共计 {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} 条&nbsp;&nbsp;&nbsp;&nbsp;共计 {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
}
});