extjs学习笔记（六) grid中数据的保存，添加和删除

珊瑚Java

  在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通过grid对数据进行增加和删除。
    我们在前边的学习过程中已经知道，grid其实只是显示数据，它通过配置参数store来获得数据，这个参数需要的是Store类或者其子类的一个对象，里边封装了我们需要的数据。我们现在应该已经比较熟悉Store类了，这次我们需要使用它的一个属性modified，里边保存了被修改过的记录的集合。我们通过把上个系列中的例子改变一下来看看如何保存数据：
<div class="cnblogs_code"><!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->  1///<reference path="vswd-ext_2.0.2.js" />
  2/**//*
  3*作者：大笨
  4*日期：2009-10-20
  5*版本：1.0
  6*博客地址：http://yage.cnblogs.com
  7*QQ：14202190
  8*/
  9Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 10
 11Ext.onReady(function() {
 12    Ext.QuickTips.init();
 13
 14    //格式化日期
 15    function formatDate(value) {
 16        return value ? value.dateFormat('Y年m月d日') : '';
 17    }
 18
 19    // 别名
 20    var fm = Ext.form;
 21
 22    //构造一个只能包含checkbox的列
 23    var checkColumn = new Ext.grid.CheckColumn({
 24        header: 'Indoor?',
 25        dataIndex: 'indoor',
 26        width: 55
 27    });
 28
 29    // 构造ColumnModel
 30    var cm = new Ext.grid.ColumnModel({
 31        columns: [{
 32            id: 'common',
 33            header: 'Common Name',
 34            dataIndex: 'common',
 35            width: 220,
 36            // 使用上边定义好的别名
 37            editor: new fm.TextField({
 38                allowBlank: false
 39            })
 40        }, {
 41            header: 'Light',
 42            dataIndex: 'light',
 43            width: 130,
 44            editor: new fm.ComboBox({
 45                typeAhead: true,
 46                triggerAction: 'all',
 47                transform: 'light',
 48                lazyRender: true,
 49                listClass: 'x-combo-list-small'
 50            })
 51        }, {
 52            header: 'Price',
 53            dataIndex: 'price',
 54            width: 70,
 55            align: 'right',
 56            renderer: 'usMoney',
 57            editor: new fm.NumberField({
 58                allowBlank: false,
 59                allowNegative: false,
 60                maxValue: 100000
 61            })
 62        }, {
 63            header: 'Available',
 64            dataIndex: 'availDate',
 65            width: 95,
 66            renderer: formatDate,
 67            editor: new fm.DateField({
 68                format: 'Y年m月d日',
 69                minValue: '01/01/06',
 70                disabledDays: [0, 6],
 71                disabledDaysText: 'Plants are not available on the weekends'
 72            })
 73        },
 74        checkColumn
 75    ],
 76        defaults: {
 77            sortable: true
 78        }
 79    });
 80
 81
 82    // 构造一个Store对象
 83    var store = new Ext.data.Store({
 84
 85        url: 'plants.xml',
 86
 87        reader: new Ext.data.XmlReader(
 88            {
 89                record: 'plant'
 90            },
 91
 92            [
 93                { name: 'common', type: 'string' },
 94                { name: 'botanical', type: 'string' },
 95                { name: 'light' },
 96                { name: 'price', type: 'float' },
 97                { name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
 98                { name: 'indoor', type: 'bool' }
 99            ]
100        ),
101
102        sortInfo: { field: 'common', direction: 'ASC' }
103    });
104
105    // 构造可编辑的grid
106    var grid = new Ext.grid.EditorGridPanel({
107        store: store,
108        cm: cm,
109        renderTo: 'grid',
110        width: 600,
111        height: 300,
112        autoExpandColumn: 'common',
113        title: 'Edit Plants?',
114        frame: true,
115        plugins: checkColumn,
116        clicksToEdit: 1,
117        listeners: {
118            "afterEdit": {
119                fn: afterEdit,
120                scope: this
121            }
122        },
123        tbar: [{
124            text: "保存",
125            handler: function() {
126                var modified = store.modified;
127                updateData(modified);
128            }
129        }]
130    });
131
132    // 触发数据的加载
133    store.load();
134
135    //发送数据到服务器端进行更新
136    function updateData(modified) {
137        var json = [];
138        Ext.each(modified, function(item) {
139            json.push(item.data);
140        });
141        if (json.length > 0) {
142            Ext.Ajax.request({
143                url: "EditGrid.aspx",
144                params: { data: Ext.util.JSON.encode(json) },
145                method: "POST",
146                success: function(response) {
147                    Ext.Msg.alert("信息", "数据更新成功！", function() { store.reload(); });
148                },