extjs學習筆記（六--2) grid中數據的保存，添加和刪除

149                failure: function(response) {
150                    Ext.Msg.alert("警告", "數據更新失敗，請稍後再試！");
151                }
152            });
153        }
154        else {
155            Ext.Msg.alert("警告", "沒有任何需要更新的數據！");
156        }
157    }
158
159    //編輯後觸發的事件，可在此進行數據有效性的驗證
160    function afterEdit(e) {
161        if (e.field == "common") {
162            if (e.value == "大笨") {
163                Ext.Msg.alert("錯誤", "大笨是人物不是植物", function() { grid.startEditing(e.row, e.column) });
164            }
165        }
166    }
167});

    紅色部分是新增加的代碼，我們首先給grid增加了一個afterEdit事件，顧名思義，該事件在編輯之後被觸發，我們可以在此時對數據的有效性進行驗證，在本例中，我們只是簡單的讓common列的值不能等於一個特定的字符串，實際的項目中可能需要對每一列用正則表達式來進行驗證。在觸發afterEdit事件的時候會傳遞一個事件對象，該對象有如下幾個屬性：
    grid：當前grid。
    record：當前行。
    field：當前列名。
    value：被設置的值。
    originalValue：編輯前的值。
     row：行索引。
    column：列索引。
     我們還在grid上加了一個工具欄，上邊放了一個保存按鈕，用以將修改後的數據傳遞到服務器進行保存。由於記錄的集合是一個複雜的json對象，我們需要的只是相關數據的幾個，因此第137-140行對該集合進行了處理。當然，我們還需要在服務器端接收數據然後進行處理，在系列一中我們已經學習到相關的方法，這裏不再贅述。我們看一看運行之後的效果圖:

 

     通過firebug，我們可以看到向服務器投遞的數據：

 

     接下來看看如何添加數據，我們在工具欄裏邊添加一個增加按鈕，相關代碼如下：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1tbar: [{
 2            text: "保存",
 3            handler: function() {
 4                var modified = store.modified;
 5
 6                updateData(modified);
 7            }
 8        },
 9            '-',
10            {
11                text: "增加",
12                handler: function() {
13                    var Plant = store.recordType;
14                    var p = new Plant({
15                        common: 'New Plant 1',
16                        light: 'Mostly Shade',
17                        price: 0,
18                        availDate: (new Date()).clearTime(),
19                        indoor: false
20                    });
21                    grid.stopEditing();
22                    store.insert(0, p);
23                    grid.startEditing(0, 0);
24                }
25            }
26                ]

     在向grid中插入數據之前，必須要先獲得插入數據的格式，Store類的recordType屬性返回Record的構造函數，表明了數據的格式，然後通過構造函數傳遞數據，這樣就準備好了要插入的數據了。接下來將grid的編輯狀態關閉，插入數據，然後把要插入數據的第一列設置爲編輯狀態。運行後點擊增加按鈕後的效果如下：

 

     可以看到，在grid的最上邊增加了一行，對應行索引0，第一列出於編輯狀態，對應列索引1，增加行中的默認初始數據就是我們在構造函數中傳遞進來的數據。注意，新增加的數據在修改之前是不會保存在store的modified屬性裏邊的。

    我們再來看看如何進行刪除操作。在進行刪除之前，我們必須要選擇需要刪除的行，grid有單元格選擇模型和行選擇模型兩種，分別以類CellSelectionModel和RowSelectionModel來表示，默認是單元格選擇模型，也就是在點擊單元格的時候選中的是當前單元格，可以通過配置屬性selModle（可簡寫爲sm）來指定選擇模式：sm:new Ext.grid.RowSelectionModel({singleSelection:true})， 這樣就把選擇模型改爲了行選擇模型，參數singleSelect指明是否是單選的，爲真的時候只能選擇一行，默認是false，可以按下ctrl鍵或者shift鍵進行多行的選擇。選擇好之後，我們就來看看如何刪除吧：

<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--> 1tbar: [{
 2            text: "保存",
 3            handler: function() {
 4                var modified = store.modified;
 5                updateData(modified);
 6            }
 7        },
 8            '-',
 9            {
10                text: "增加",
11                handler: function() {
12                    var Plant = store.recordType;
13                    var p = new Plant({
14                        common: 'New Plant 1',
15                        light: 'Mostly Shade',
16                        price: 0,
17                        availDate: (new Date()).clearTime(),
18                        indoor: false
19                    });
20                    grid.stopEditing();
21                    store.insert(0, p);
22                    grid.startEditing(0, 0);
23                }
24            },
25            " ",
26            {
27                text: "刪除",
28                handler: function() {
29                    var selModel = grid.getSelectionModel();
30                    if (selModel.hasSelection()) {
31                        Ext.Msg.confirm("警告", "確定要刪除嗎？", function(button) {
32                            if (button == "yes") {
33                                var selections = selModel.getSelections();
34                                Ext.each(selections, function(item) {
35                                    store.remove(item);
36                                });
37                            }
38                        });
39                    }
40                    else {
41                        Ext.Msg.alert("錯誤", "沒有任何行被選中，無法進行刪除操作！");
42                    }
43                }
44            }
45                ]