這一章我比較在乎，但可惜我學的不好。越往後我的很多效果都沒有實現，也許是沒有耐心了吧。因為在公司要幹活啊，不能整天的學習，我是很想趕快的結束extjs的學習，然後去研究專案，因為專案中的前端都是extjs，但是我又告訴自己別心急，反正就這個樣子，後面的東西學的不如前面好，不過我還是把程式碼貼出來，找了很久也沒有找到錯，是一時粗心寫丟了什麼還是怎麼的，所以效果圖就不貼了。

Ext.onReady(function(){
	/*
	 * EditorGridPanel的工作過程
	 * 1、使用者點選單元格
	 * 2、單元格按照預設的元件顯示單元格的內容並處於編輯狀態
	 * 3、離開單元格的編輯狀態
	 * 4、更新編輯後的內容，出現三角號表示已經被修改過
	 * 5、程式內部變化：將記錄設定為髒讀資料狀態，並將修改後的記錄存放在Record型別的陣列modified中。
	 */
	
	
	//準備資料
	var data = [
		{id:1,date:new Date(),name:"呂鵬",address:"中華人民共和國",bank:"中國光大銀行",isFast:true},
		{id:2,date:new Date(),name:"張三",address:"中華人民共和國",bank:"中國農業銀行",isFast:false},
		{id:3,date:new Date(),name:"李四",address:"中華人民共和國",bank:"中國商業銀行",isFast:false},
		{id:4,date:new Date(),name:"王五",address:"中華人民共和國",bank:"中國招商銀行",isFast:false}
	];
	//Proxy
	var proxy = new Ext.data.MemoryProxy(data);
	//描述資料結構
	var Order = Ext.data.Record.create(
		[
			{name:"ID",type:"int",mapping:"id"},//編號
			{name:"DATE",type:"date",mapping:"date"},//日期
			{name:"NAME",type:"string",mapping:"name"},//姓名
			{name:"ADDRESS",type:"string",mapping:"address"},//地址
			{name:"BANK",type:"string",mapping:"bank"},//銀行
			{name:"ISFAST",type:"boolean",mapping:"isFast"}//銀行
		]
	);
	//Reader
	var reader = new Ext.data.JsonReader({},Order);
	//Store  列模型中的dataIndex必須和Human結構中的name屬性保持一致
	var store = new Ext.data.Store({
		proxy:proxy,
		reader:reader,
		autoLoad:true,
		pruneModifiedRecords:true
	});
	
	//交易銀行
	var banks = [
		["中國光大銀行","中國光大銀行"],
		["中國農業銀行","中國農業銀行"],
		["中國商業銀行","中國商業銀行"],
		["中國招商銀行","中國招商銀行"]
	]
	
	//列模型
	var cm = new Ext.grid.ColumnModel([
		{header:"訂單編號",dataIndex:"ID",width:60,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:false}))},
		{header:"下單日期",dataIndex:"DATE",width:140,renderer:new Ext.util.Format.dateRenderer("Y-m-d"),editor:new Ext.grid.GridEditor(new Ext.form.DateField({
			format:"Y-m-d"
		}))},
		{header:"收貨人姓名",dataIndex:"NAME",width:120,editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
		{header:"收貨人地址",dataIndex:"ADDRESS",editor:new Ext.grid.GridEditor(new Ext.form.TextField())},
		{header:"交易銀行",dataIndex:"BANK",width:120,editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
			store:new Ext.data.SimpleStore({
				fields:["value","text"],
				data:banks
			}),
			displayField:"text",
			valueField:"value",
			mode:"local",
			triggerAction:"all",
			readOnly:true,
			emptyText:"請選擇銀行"
			
		}))},
		{header:"快遞",dataIndex:"ISFAST",width:70,renderer:function(v){return v?"快遞":"非快遞"},editor:new Ext.grid.GridEditor(new Ext.form.Checkbox())}
	]);
	//EditorGridPanel定義
	var grid = new Ext.grid.EditorGridPanel({
		store:store,
		cm:cm,
		autoExpandColumn:"ADDRESS",
		width:800,
		autoHeight:true,
		renderTo:"a",
		autoEncode:true, //提交時是否自動轉碼
		tbar:[{
			text:"新增一行",
			cls:"x-btn-text-icon",
			handler:function(){
				var initValue = {
						ID:"",
						DATE:new Date(),
						NAME:"",
						ADDRESS:"",
						BANK:"",
						ISFAST:false
					};
					
				var order = new Order(initValue);
				grid.stopEditing();
				grid.getStore().add(order);
				
				//設定髒資料
				order.dirty = true;
				//只要一個欄位值被修改了，該行的所有值都設定為髒讀標記
				order.modified = initValue;
				if(grid.getStore().modified.indexOf(order) == -1){
					grid.getStore().modified.push(order);
				}
			}
			
		},{
			text:"刪除一行",
			cls:"x-btn-text-icon",
			handler:function(){
				var sm = grid.getSelectionModel();
				if(sm.hasSelection()){
					Ext.Msg.confirm("提示","真的要刪除選中的行嗎？",function(btn){
						if(btn == "yes"){
							var cellIndex = sm.getSelectedCell();//獲取被選擇的單元格的行和列索引
							var record = grid.getStore().getAt(cellIndex[0]);
							grid.getStore().remove(record);
						}
					});
				}else{
					Ext.Msg.alert("錯誤","請先選擇刪除的行，謝謝");
				}
			}
		},"-",{
			text:"儲存",
//			icon:"",
			cls:"x-btn-text-icon",
			handler:function(){
				var store = grid.getStore();
				//得到修改過的Recored的集合
				var modified = store.modified.slice(0);
				//將資料放到另外一個數組中
				var jsonArray = [];
				Ext.each(modified,function(m){
					//alert(m.data.ADDRESS);//讀取當前被修改的記錄的地址
					//m.data中儲存的是當前Recored的所有欄位的值json，不包含結構資訊
					jsonArray.push(m.data);
				});
				
				var r = checkBlank(modified);
				if(!r){
					return;
				}else{
					//通過ajax請求將修改的記錄傳送到伺服器最終影響資料庫
					Ext.Ajax.request({
						method:"post",//最好不要用get請求
						url:"../../../editGridServlet",
						success:function(response,config){
							var json = Ext.util.JSON.decode(response.responseText);
							//grid.getStore().reload();
							Ext.Msg.alert("提交成功",json.msg);
						},
						params:{data:Ext.util.JSON.encode(jsonArray)}
						
					});
				}
			}
		}]
	});
	//刪除一行時，同步資料庫
	grid.getStore().on("remove",function(s,record,index){
		var jsonArray = [record,data];//因為servlet只處理陣列，所以先變成陣列
		if(record.data.ID != ""){
			Ext.Ajax.request({
				method:"post",
				url:"../../../editGridServlet",
				params:{data:Ext.util.JSON.encode(jsonArray),action:"delete"},
				success:function(response,config){
					var msg = Ext.util.JSON.decode(response.responseText);
					//grid.getStore().reload();
					Ext.Msg.alert("",msg.msg);
				}
			});
		}
	});
	
	//驗證是否輸入的資料是有效的
	var checkBlank = function(modified/*所有編輯過的和新增加的Record*/){
		var result = true;
		Ext.each(modified,function(record){
			var keys = record.fields.keys;//獲取Record的所有名稱
			Ext.each(keys,function(name){
				//根據名稱獲取相應的值
				var value = record.data[name];
				//找出指定名稱所在的列索引
				var colIndex = cm.findColumnIndex(name);
				//var rowIndex = grid.getStore().indexOfId(record.id);
				
				//根據行列索引找出元件編輯器
				var editor = cm.getCellEditor(colIndex).field;
				//驗證是否合法
				var r = editor.validateValue(value);
				if(!r){
					Ext.MessageBox.alert("驗證","對不起，您輸入的資料非法");
					result = false;
					return;
				}
				
			});
		});
		return result;
	}
});