ExtJs学习

  在上一个系列当中，我们学习了如何对grid中的内容进行编辑，但是编辑的结果我们并没有保存，这在实际的应用中是没有什么意义的。在有些情况下，除了编辑之外，还要通过grid进行数据的增加和删除，这两个操作也涉及到对于数据的保存。在这个系列里边，我们将学习如何保存数据以及通过grid对数据进行增加和删除。

    我们在前边的学习过程中已经知道，grid其实只是显示数据，它通过配置参数store来获得数据，这个参数需要的是Store类或者其子类的一个对象，里边封装了我们需要的数据。我们现在应该已经比较熟悉Store类了，这次我们需要使用它的一个属性modified，里边保存了被修改过的记录的集合。我们通过把上个系列中的例子改变一下来看看如何保存数据：

  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*/
  9 Ext.BLANK_IMAGE_URL  =   ' ../extjs/resources/images/default/s.gif ' ;
 10
 11 Ext.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