使用Extjs4創建一個頭行結構的界面

function getStore(dataModel,url,gridDivId){
	// create the Data Store
	var store = Ext.create('Ext.data.Store', {
		pageSize : 15,
		model : dataModel,
//		remoteSort : true,
		proxy : {
			type : 'ajax',
			url : scriptGlobal.appRoot+url,
			reader : {
				type: 'json',
				root : 'D',
				totalProperty : 'P.T'
			},
			// sends single sort as multi parameter
			simpleSortMode : true
		},
		sorters : [ {
			property : '',
			direction : ''
		} ]
	});
	store.on("load",function(records, operation, success){
		if(store.getCount()>0)
		{
			var grid1 = Ext.getCmp(gridDivId);
//			grid1.getSelectionModel().select(0);
			if(!editRowArray[gridDivId]) {editRowArray[gridDivId]=0;}//第一次load，賦值爲0
			grid1.getSelectionModel().deselect(editRowArray[gridDivId],false);//解決store load後選中記錄的值沒有更新
			grid1.getSelectionModel().select(editRowArray[gridDivId]);//load的時候選中load前選中的行
		}
		if(!success)
		{
			ShowMessageSysError();
		}
	});

	return store;
}

function getBackBtn()
{
	var backBtn = {
		text: '返回',
		handler: function() {
			Ext.MessageBox.confirm(messageBoxTitle, '您確定要返回上一個界面嗎?', function(choice){
				if(choice=="yes"){//yes no
					history.go(-1);
				}
			});
		}
	};
	return backBtn;
}

function getReloadBtn(store1,obj)
{
	var reloadBtn = {
		text: '重新加載',
		handler: function() {
			var myMask = new Ext.LoadMask(Ext.getBody(),{msg:msg});
			myMask.show();
			store1.load({params:{obj:obj}});
			myMask.hide();
		}
	};
	return reloadBtn;
}

/**
* @Name: 
* @Description: 數據列表
* @author huangfuqiang
* @date 2016-3-1 
*/
document.write("<script language=javascript src='"+scriptGlobal.appRoot+"/scripts/extjs/extends/store.js' charset='utf-8'></script>");

var readyFunction =function(){
	var columns = [{ text: '編碼', dataIndex: 'rowId', align: 'left', minWidth:50,field:'textfield', hidden:false,renderer:''},
	               { text: '說明', dataIndex: 'descText', align: 'left', minWidth:200,field:'textfield', hidden:false,renderer:''},
	               { text: '狀態', dataIndex: 'status', align: 'left', minWidth:50,field:'textfield', hidden:false,renderer:''},
	               { text: '是否重複？', dataIndex: 'rptFlag', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '重複間隔', dataIndex: 'rptInterval', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '重複單位', dataIndex: 'rptUom', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '完成信息', dataIndex: 'completionText', align: 'left', minWidth:200,field:'textarea', hidden:false,renderer:''},
	               { text: '類名', dataIndex: 'className', align: 'left', minWidth:300,field:'textfield', hidden:false,renderer:''},
	               { text: '方法', dataIndex: 'method', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '實際開始時間', dataIndex: 'actlStartDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '實際結束時間', dataIndex: 'actlEndDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '到期日期', dataIndex: 'expirationDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '計劃開始時間', dataIndex: 'schedStartDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '提交時間', dataIndex: 'submitDate', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '完成代碼', dataIndex: 'completionCd', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '執行服務器', dataIndex: 'execSrvrName', align: 'left', minWidth:150,field:'textfield', hidden:false,renderer:''},
	               { text: '模式', dataIndex: 'tmodel', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '任務Id', dataIndex: 'taskPid', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '創建日期', dataIndex: 'created', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '創建人', dataIndex: 'createdBy', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '最後更新日期', dataIndex: 'lastUpd', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '最後更新人', dataIndex: 'lastUpdBy', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''}];
	var columns2 = [{ text: '編碼', dataIndex: 'rowId', align: 'left', minWidth:50,field:'textfield', hidden:false,renderer:''},
	               { text: '說明', dataIndex: 'descText', align: 'left', minWidth:200,field:'textfield', hidden:true,renderer:''},
	               { text: '狀態', dataIndex: 'status', align: 'left', minWidth:50,field:'textfield', hidden:false,renderer:''},
	               { text: '完成信息', dataIndex: 'completionText', align: 'left', minWidth:200,field:'textarea', hidden:false,renderer:''},
	               { text: '類名', dataIndex: 'className', align: 'left', minWidth:200,field:'textfield', hidden:true,renderer:''},
	               { text: '實際開始時間', dataIndex: 'actlStartDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '實際結束時間', dataIndex: 'actlEndDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '到期日期', dataIndex: 'expirationDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '計劃開始時間', dataIndex: 'schedStartDt', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '提交時間', dataIndex: 'submitDate', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '完成代碼', dataIndex: 'completionCd', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '執行服務器', dataIndex: 'execSrvrName', align: 'left', minWidth:150,field:'textfield', hidden:false,renderer:''},
	               { text: '方法', dataIndex: 'method', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '模式', dataIndex: 'tmodel', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '是否重複？', dataIndex: 'rptFlag', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '重複間隔', dataIndex: 'rptInterval', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '重複單位', dataIndex: 'rptUom', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '任務Id', dataIndex: 'taskPid', align: 'left', minWidth:100,field:'textfield', hidden:true,renderer:''},
	               { text: '創建日期', dataIndex: 'created', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '創建人', dataIndex: 'createdBy', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''},
	               { text: '最後更新日期', dataIndex: 'lastUpd', align: 'left', minWidth:150,field:'datefield', hidden:false,renderer:Ext.util.Format.dateRenderer('Y-m-d H:i:s')},
	               { text: '最後更新人', dataIndex: 'lastUpdBy', align: 'left', minWidth:100,field:'textfield', hidden:false,renderer:''}];

	var fieldArray = new Array();
	for(var i = 0;i<columns.length;i++){
		fieldArray.push(columns[i].dataIndex);
	}
	Ext.define('dataModel', {extend : 'Ext.data.Model',fields : fieldArray,idProperty : columns[0].dataIndex});
	var store1 = getStore('dataModel','/workflow/siebel.jssm?method=getThreadPage',"gridId");
	var store2 = getStore('dataModel','/workflow/siebel.jssm?method=getThreadRpdPage',"gridId2");
	
	var backBtn = getBackBtn();
	var reloadBtn = {
			text: '重新加載',
			handler: function() {
				var myMask = new Ext.LoadMask(Ext.getBody(),{msg:msg});
				myMask.show();
				store1.reload({params:{obj:''},callback:function(){
					grid.getSelectionModel().select(editRowArray["gridId"]);
				}});
				myMask.hide();
			}
		};
	var testCaseBtn = {
			text: '測試用例發送郵件2hand',
			handler: function() {
				SyncRequest('/workflow/siebel.jssm?method=testcase2Hand');
				store1.reload({params:{obj:''}});
			}
		};
	var testCase2AllBtn = {
			text: '發送郵件2All',
			handler: function() {
				 Ext.Msg.confirm("警告", "確定要執行該操作嗎？", function (button) {
                     if (button == "yes") {
						SyncRequest('/workflow/siebel.jssm?method=sendMail2All');
						store1.reload({params:{obj:''}});
                     }
                 });
			}
		};
	var stoptBtn = {
			text: '取消',
			handler: function() {
				var selModel = grid.getSelectionModel();
                if (selModel.hasSelection()) {
                    Ext.Msg.confirm("警告", "確定要取消嗎？", function (button) {
                        if (button == "yes") {
                        	var json = getSelectedJson(grid.getSelectionModel().getSelection()[0].raw,columns);
                            
                            SyncRequest('/workflow/siebel.jssm?method=stopThread&obj='+json);
            				store1.reload({params:{obj:''}});
                          //  alert(Ids);

                        }
                    });
                }
                else {
                    Ext.Msg.alert("錯誤", "沒有任何行被選中，無法進行操作！");
                }
			}
		};
	var suspendBtn = {
			text: '掛起',
			handler: function() {
				var selModel = grid.getSelectionModel();
                if (selModel.hasSelection()) {
                    Ext.Msg.confirm("警告", "確定要掛起嗎？", function (button) {
                        if (button == "yes") {
                        	var json = getSelectedJson(grid.getSelectionModel().getSelection()[0].raw,columns);
                            SyncRequest('/workflow/siebel.jssm?method=suspendThread&obj='+json);
            				store1.reload({params:{obj:''}});
                          //  alert(Ids);

                        }
                    });
                }
                else {
                    Ext.Msg.alert("錯誤", "沒有任何行被選中，無法進行操作！");
                }
			}
		};
	var resumeBtn = {
			text: '恢復',
			handler: function() {
				var selModel = grid.getSelectionModel();
                if (selModel.hasSelection()) {
                    Ext.Msg.confirm("警告", "確定要恢復嗎？", function (button) {
                        if (button == "yes") {
                        	var json = getSelectedJson(grid.getSelectionModel().getSelection()[0].raw,columns);
                            
                            SyncRequest('/workflow/siebel.jssm?method=resumeThread&obj='+json);
            				store1.reload({params:{obj:''}});
                          //  alert(Ids);

                        }
                    });
                }
                else {
                    Ext.Msg.alert("錯誤", "沒有任何行被選中，無法進行操作！");
                }
			}
		};
	var tbar = [backBtn,reloadBtn,testCaseBtn,testCase2AllBtn,suspendBtn,resumeBtn,stoptBtn];

	var reloadBtn2 ={
			text: '重新加載',
			handler: function() {
				var json = getSelectedJson(grid.getSelectionModel().getSelection()[0].raw,columns);
				var myMask = new Ext.LoadMask(Ext.getBody(),{msg:msg});
				myMask.show();
				store2.reload({params:{obj:json}});
				myMask.hide();
			}
		};
	var tbar2 = [reloadBtn2];
	var grid = getGrid(tbar,store1,columns,"gridId", "工作",1200,400);
	var grid2 = getGrid(tbar2,store2,columns2,"gridId2", "重複實例",1200,400);
	//var win = getChartWindow(1000,600,tbar,grid,titleName);
	store1.load({params:{obj:''}});
	//點擊下一頁切換的時候 帶上obj參數 
	store2.on("beforeload", function (store, options) {
	    var params = {
	    	obj:getSelectedJson(grid.getSelectionModel().getSelection()[0].raw,columns)
	    };
	    Ext.apply(store.proxy.extraParams, params);
	});
	grid.getSelectionModel().on("selectionchange",function(model,selected ){
		if(selected[0]){
			var json = getSelectedJson(selected[0].raw,columns);
			editRowArray["gridId"] = selected[0].index;
			store2.load({params:{obj:json}});
//		for(var i=0;i<cm.getColumnCount();i++){
//			var name = cm.getDataIndex(i);
//			var value = cm.getColumnHeader(i);
//			if(Ext.getCmp(name)){
//				Ext.getCmp(name).setValue(r.get(name));
//			}
//		}
		}
	});
	
};