原網址：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-14/176.html

 上節講到通過後臺數據進行分頁，分頁工具條還可以放置在頂端，或者上下都有而不影響資料，因為它們都共用一個store

1. //建立表格  
2. var grid = new Ext.grid.GridPanel({  
3.         renderTo:'grid'
   , //渲染位置  
4.         autoHeight:true,  
5.         store:store,  
6.         width:550,  
7.         columns:columns, //顯示列
     
8.         bbar:new Ext.PagingToolbar({  
9.             pageSize:25, //每頁顯示幾條資料  
10.             store:store,   
11.             displayInfo:true, //是否顯示資料資訊  
12.             displayMsg:'顯示第 {0} 條到 {1} 條記錄，一共  {2} 條', //只要當displayInfo為true時才有效，用來顯示有資料時的提示資訊，{0},{1},{2}會自動被替換成對應的資料  
13.             emptyMsg: "沒有記錄" //沒有資料時顯示資訊  
14.         }),  
15.         tbar:new Ext.PagingToolbar({  
16.             pageSize:25, //每頁顯示幾條資料  
17.             store:store,   
18.             displayInfo:true, //是否顯示資料資訊  
19.             displayMsg:'顯示第 {0} 條到 {1} 條記錄，一共  {2} 條', //只要當displayInfo為true時才有效，用來顯示有資料時的提示資訊，{0},{1},{2}會自動被替換成對應的資料  
20.             emptyMsg: "沒有記錄" //沒有資料時顯示資訊  
21.         })  
22.     });  

除了後臺傳遞資料分頁，預設的排序外，extjs還可以自定義排序，通過傳遞資料來進行後臺排序。

如果需要對所有資料排序，則需要把排序資訊提交到後臺，由後臺將排序資訊組裝到SQL裡，然後再由後臺將處理好的資料返回給前臺。這就是前臺與後臺互動的過程，既然要提交到服務端，便需要將Ext.data.Store的remoteSort屬性設定為true，這個屬性是指是否允許遠端排序，預設值為false。下次排序時就會有變化，不會立即顯示出排序結果，而是將後臺提交了2個引數，分別是sort和dir。sort表示需要排序的欄位，dir表示升序或降序。後臺根據這些引數進行處理。

1. req.getParameter("sort"); //排序欄位  
2. req.getParameter("dir"); //升序還是降序  

以上知識是對上節的補充，現在開始將這節所學：可編輯表格--EditorGrid

大家使用過Mircrosoft Excel，它的功能強大，使用者可隨意新增或刪除表格中的行和列，而且只儲存一此即可。EditorGrid也提供這些功能，可以直接在表格裡執行新增、刪除、修改和查詢等操作，然後一次性儲存。此外，還可以動態修改某個單元格，這些單元格我們先暫時不能為空，儲存時會進行檢測，為空就無法儲存，驗證資訊會給予提示。

以上實現的效果就是本節所要做的效果，現在看程式碼：

1. Ext.onReady(function(){  
2.     //定義列  
3.     var columns = [  
4.         {header:'編號',dataIndex:'id',width:50,  
5.             editor:{  
6.                 allowBlank:true  
7.             }}, //sortable:true 可設定是否為該列進行排序  
8.         {header:'名稱',dataIndex:'name',width:80,  
9.                 editor:{  
10.                     allowBlank:true  
11.                 }},  
12.         {header:'描述',dataIndex:'descn',width:112,  
13.                     editor:{  
14.                         allowBlank:true  
15.                     }}  
16.       ];  
17.     //定義資料  
18.     var data =[  
19.         ['1','小王','描述01'],  
20.         ['2','李四','描述02'],  
21.         ['3','張三','描述03'],  
22.         ['4','束洋洋','思考者日記網'],  
23.         ['5','高飛','描述05']  
24.     ];  
25.     //轉換原始資料為EXT可以顯示的資料  
26.     var store = new Ext.data.ArrayStore({  
27.         data:data,  
28.         fields:[  
29.            {name:'id'}, //mapping:0 這樣的可以指定列顯示的位置，0代表第1列，可以隨意設定列顯示的位置  
30.            {name:'name'},  
31.            {name:'descn'}  
32.         ]  
33.     });  
34.     //載入資料  
35.     store.load();  
36.   
37.     //建立表格  
38.     var grid = new Ext.grid.GridPanel({  
39.         renderTo:'grid', //渲染位置  
40.         width:550,  
41.         autoHeight:true,  
42.         store:store,  
43.         columns:columns, //顯示列  
44.         stripeRows:true, //斑馬線效果  
45.         selType: 'cellmodel',  
46.         plugins:[  
47.                  Ext.create('Ext.grid.plugin.CellEditing',{  
48.                      clicksToEdit:1 //設定單擊單元格編輯  
49.                  })  
50.         ],  
51.         tbar:['-',{  
52.             text:'新增一行',  
53.             handler:function(){  
54.                 var p ={  
55.                         id:'',  
56.                         name:'',  
57.                         descn:''  
58.                         };  
59.                     store.insert(0,p);  
60.                 }  
61.             },'-',{  
62.                 text:'刪除一行',  
63.                 handler:function(){  
64.                     Ext.Msg.confirm('系統提示','確定要刪除？',function(btn){  
65.                         if(btn=='yes'){  
66.                             var sm = grid.getSelectionModel();  
67.                             var record = sm.getSelection()[0];  
68.                             store.remove(record);  
69.                         }  
70.                     });  
71.                 }  
72.         },'-',{  
73.             text:'儲存',  
74.             handler:function(){  
75.                 var m = store.getModifiedRecords().slice(0);  
76.                 var jsonArray = [];  
77.                 Ext.each(m,function(item){  
78.                     jsonArray.push(item.data);  
79.                 });  
80.                 Ext.Ajax.request({  
81.                     method:'POST',  
82.                     url:'/ExtJs4.2Pro/EditGridServlet',  
83.                     success:function(response){  
84.                         Ext.Msg.alert('系統提示',response.responseText,function(){  
85.                             store.load();  
86.                         });  
87.                     },  
88.                     failure:function(){  
89.                         Ext.Msg.alert("錯誤","與後臺聯絡的時候出了問題。");  
90.                     },  
91.                     params:'data='+encodeURIComponent(Ext.encode(jsonArray))  
92.                 });  
93.             }  
94.         }]  
95.     });  
96. });  

這裡我們啟用了CellEditing外掛，其他的部分並沒有什麼變化。可是看到的結果是，現在可以用TextField的方式隨意修改單元格。記得不能讓單元格為空，否則無法修改。

預設情況下，需要雙擊單元格才能啟用編輯器，從而進行修改。不過，也可以給表格配置上clicksToEdit:1，這樣就可以通過單擊單元格啟用編輯器，從而進行修改，上面的程式碼中已經用到了。

TextField不允許輸入空值，因為在建立columns時對應的editor設定了allowBlank:false屬性。allowBlank:false表示不執行在TextField中輸入空值。

上面的示例中用到了陣列物件的Slice(start,[end])方法，該方法返回一個新陣列，包含了原函式從start到end所指定的元素，但是不包括end元素，比如a.slice(0,3)。如果start為負，則將它作為length+start處理（此處length為陣列的長度，比如a.slice(-3,4)，相當於a.slice(2,4)）。如果end為負，就將它作為length+end處理（次數length為陣列的長度，比如a.slice(0,-1)。如果省略end，那麼slice方法將一直複製到原陣列結尾，比如a.slice(1)）。如果省略end，那麼slice方法將一直複製到原陣列結尾，比如a.slice(1)。如果end出現在start之前，不復制任何元素到新陣列中，比如a.slice(4,3)。示例中store.getModifiedRecords().slice(0)的作用就是複製store.getModifiedRecords()，保證store.getModifiedRecords()中的原始資料不受影響。

下面看下後臺對輸入的資料怎麼進行儲存的？

輸入一行資料

點選儲存後

後臺程式碼

1. @SuppressWarnings("serial")  
2. public class EditGridServlet extends HttpServlet {  
3.     @Override  
4.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
5.             throws ServletException, IOException {  
6.         doPost(req,resp);  
7.     }  
8.   
9.     @Override  
10.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
11.             throws ServletException, IOException {  
12.         req.setCharacterEncoding("UTF-8");  
13.   
14.         String data = req.getParameter("data");  
15.         System.out.println(data);  
16.   
17.         resp.getWriter().print(data);  
18.     }  
19. }  

列印結果：