珊瑚Java 发表于 2013-1-29 11:34:55

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

  在上一个系列当中，我们学习了如何对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 />-->  1http://www.cnblogs.com/Images/OutliningIndicators/None.gif///<reference path="vswd-ext_2.0.2.js" />
  2http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif/**//*
  3http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif*作者：大笨
  4http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif*日期：2009-10-20
  5http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif*版本：1.0
  6http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif*博客地址：http://yage.cnblogs.com
  7http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif*QQ：14202190
  8http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif*/
  9http://www.cnblogs.com/Images/OutliningIndicators/None.gifExt.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
 10http://www.cnblogs.com/Images/OutliningIndicators/None.gif
 11http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gifExt.onReady(function() http://www.cnblogs.com/Images/dot.gif{
 12http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    Ext.QuickTips.init();
 13http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 14http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    //格式化日期
 15http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    function formatDate(value) http://www.cnblogs.com/Images/dot.gif{
 16http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        return value ? value.dateFormat('Y年m月d日') : '';
 17http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    }
 18http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 19http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    // 别名
 20http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    var fm = Ext.form;
 21http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 22http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    //构造一个只能包含checkbox的列
 23http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    var checkColumn = new Ext.grid.CheckColumn(http://www.cnblogs.com/Images/dot.gif{
 24http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        header: 'Indoor?',
 25http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        dataIndex: 'indoor',
 26http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        width: 55
 27http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
 28http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 29http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    // 构造ColumnModel
 30http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    var cm = new Ext.grid.ColumnModel(http://www.cnblogs.com/Images/dot.gif{
 31http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        columns: [http://www.cnblogs.com/Images/dot.gif{
 32http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            id: 'common',
 33http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            header: 'Common Name',
 34http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            dataIndex: 'common',
 35http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            width: 220,
 36http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            // 使用上边定义好的别名
 37http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            editor: new fm.TextField(http://www.cnblogs.com/Images/dot.gif{
 38http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                allowBlank: false
 39http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            })
 40http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        }, http://www.cnblogs.com/Images/dot.gif{
 41http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            header: 'Light',
 42http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            dataIndex: 'light',
 43http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            width: 130,
 44http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            editor: new fm.ComboBox(http://www.cnblogs.com/Images/dot.gif{
 45http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                typeAhead: true,
 46http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                triggerAction: 'all',
 47http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                transform: 'light',
 48http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                lazyRender: true,
 49http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                listClass: 'x-combo-list-small'
 50http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            })
 51http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        }, http://www.cnblogs.com/Images/dot.gif{
 52http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            header: 'Price',
 53http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            dataIndex: 'price',
 54http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            width: 70,
 55http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            align: 'right',
 56http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            renderer: 'usMoney',
 57http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            editor: new fm.NumberField(http://www.cnblogs.com/Images/dot.gif{
 58http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                allowBlank: false,
 59http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                allowNegative: false,
 60http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                maxValue: 100000
 61http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            })
 62http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        }, http://www.cnblogs.com/Images/dot.gif{
 63http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            header: 'Available',
 64http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            dataIndex: 'availDate',
 65http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            width: 95,
 66http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            renderer: formatDate,
 67http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            editor: new fm.DateField(http://www.cnblogs.com/Images/dot.gif{
 68http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                format: 'Y年m月d日',
 69http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                minValue: '01/01/06',
 70http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                disabledDays: [0, 6],
 71http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                disabledDaysText: 'Plants are not available on the weekends'
 72http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            })
 73http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif        },
 74http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        checkColumn
 75http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    ],
 76http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        defaults: http://www.cnblogs.com/Images/dot.gif{
 77http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            sortable: true
 78http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif        }
 79http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
 80http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 81http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 82http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    // 构造一个Store对象
 83http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    var store = new Ext.data.Store(http://www.cnblogs.com/Images/dot.gif{
 84http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 85http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        url: 'plants.xml',
 86http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 87http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        reader: new Ext.data.XmlReader(
 88http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            http://www.cnblogs.com/Images/dot.gif{
 89http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                record: 'plant'
 90http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            },
 91http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
 92http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            [
 93http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'common', type: 'string' },
 94http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'botanical', type: 'string' },
 95http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'light' },
 96http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'price', type: 'float' },
 97http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y' },
 98http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                http://www.cnblogs.com/Images/dot.gif{ name: 'indoor', type: 'bool' }
 99http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            ]
100http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        ),
101http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
102http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        sortInfo: http://www.cnblogs.com/Images/dot.gif{ field: 'common', direction: 'ASC' }
103http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
104http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
105http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    // 构造可编辑的grid
106http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    var grid = new Ext.grid.EditorGridPanel(http://www.cnblogs.com/Images/dot.gif{
107http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        store: store,
108http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        cm: cm,
109http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        renderTo: 'grid',
110http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        width: 600,
111http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        height: 300,
112http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        autoExpandColumn: 'common',
113http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        title: 'Edit Plants?',
114http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        frame: true,
115http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        plugins: checkColumn,
116http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        clicksToEdit: 1,
117http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        listeners: http://www.cnblogs.com/Images/dot.gif{
118http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            "afterEdit": http://www.cnblogs.com/Images/dot.gif{
119http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                fn: afterEdit,
120http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                scope: this
121http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            }
122http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif        },
123http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        tbar: [http://www.cnblogs.com/Images/dot.gif{
124http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            text: "保存",
125http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            handler: function() http://www.cnblogs.com/Images/dot.gif{
126http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                var modified = store.modified;
127http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                updateData(modified);
128http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif            }
129http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif        }]
130http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif    });
131http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
132http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    // 触发数据的加载
133http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    store.load();
134http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
135http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif    //发送数据到服务器端进行更新
136http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif    function updateData(modified) http://www.cnblogs.com/Images/dot.gif{
137http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif        var json = [];
138http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        Ext.each(modified, function(item) http://www.cnblogs.com/Images/dot.gif{
139http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif            json.push(item.data);
140http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif        });
141http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif        if (json.length > 0) http://www.cnblogs.com/Images/dot.gif{
142http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif            Ext.Ajax.request(http://www.cnblogs.com/Images/dot.gif{
143http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                url: "EditGrid.aspx",
144http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                params: http://www.cnblogs.com/Images/dot.gif{ data: Ext.util.JSON.encode(json) },
145http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif                method: "POST",
146http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                success: function(response) http://www.cnblogs.com/Images/dot.gif{
147http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gifhttp://www.cnblogs.com/Images/OutliningIndicators/ContractedSubBlock.gif                    Ext.Msg.alert("信息", "数据更新成功！", function() http://www.cnblogs.com/Images/dot.gif{ store.reload(); });
148http://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif                },
页: [1]
查看完整版本: extjs学习笔记（六) grid中数据的保存，添加和删除