EXTJS 动态数据 行里面 添加 删除 操作

EXTJS 动态数据 行里面 添加 删除 操作 /*! * Ext JS Library 3.1.1 * Copyright(c) 2006-2010 Ext JS, LLC * licensing@extjs.com * http://www.extjs.com/license */// Application instance for showing user-feedback messages.var App = new Ext.App({}); // Create a standard HttpProxy instance.var proxy = new Ext.data.HttpProxy({ url: 'app.php/users'}); // Typical JsonReader. Notice additional meta-data params for defining the core attributes of your json-responsevar reader = new Ext.data.JsonReader({ totalProperty: 'total', successProperty: 'success', idProperty: 'id', root: 'data', messageProperty: 'message' // <-- New "messageProperty" meta-data}, [ {name: 'id'}, {name: 'email', allowBlank: false}, {name: 'first', allowBlank: false}, {name: 'last', allowBlank: false}]); // The new DataWriter component.var writer = new Ext.data.JsonWriter({ encode: false // <-- don't return encoded JSON -- causes Ext.Ajax#request to send data using jsonData config rather than HTTP params}); // Typical Store collecting the Proxy, Reader and Writer together.var store = new Ext.data.Store({ id: 'user', restful: true, // <-- This Store is RESTful proxy: proxy, reader: reader, writer: writer // <-- plug a DataWriter into the store just as you would a Reader}); // load the store immeditatelystore.load(); ////// ***New*** centralized listening of DataProxy events "beforewrite", "write" and "writeexception"// upon Ext.data.DataProxy class. This is handy for centralizing user-feedback messaging into one place rather than// attaching listenrs to EACH Store.//// Listen to all DataProxy beforewrite events//Ext.data.DataProxy.addListener('beforewrite', function(proxy, action) { App.setAlert(App.STATUS_NOTICE, "Before " + action);}); ////// all write events//Ext.data.DataProxy.addListener('write', function(proxy, action, result, res, rs) { App.setAlert(true, action + ':' + res.message);}); ////// all exception events//Ext.data.DataProxy.addListener('exception', function(proxy, type, action, options, res) { App.setAlert(false, "Something bad happend while executing " + action);});var cmb = new Ext.form.ComboBox({ typeAhead: true, triggerAction: 'all', mode: 'local',editable:false,store:[['key1','value1'],['key2','value2']]});// Let's pretend we rendered our grid-columns with meta-data from our ORM framework.var userColumns = [ {header: "ID", width: 40, sortable: true, dataIndex: 'id'}, {header: "Email", width: 100, sortable: true, dataIndex: 'email', editor: new Ext.form.TextField({})}, {header: "First", width: 50, sortable: true, dataIndex: 'first', editor: cmb}, {header: "Last", width: 50, sortable: true, dataIndex: 'last', editor: new Ext.form.TextField({})}, {header: "Last", width: 50, sortable: true, dataIndex: 'last', renderer:function(val, metadata, record, rowIndex, colIndex, store){ return "<input type='button' name='"+val.name+"opt_type' value='add' onclick='add_row("+rowIndex+");'/> " + "<input type='button' name='"+val.name+"opt_type' value='del' onclick=''/>"; }}]; Ext.onReady(function() { Ext.QuickTips.init(); // use RowEditor for editing var editor = new Ext.ux.grid.RowEditor({ clicksToEdit : 2, saveText: 'Update' }); // Create a typical GridPanel with RowEditor plugin var userGrid = new Ext.grid.GridPanel({ id:'user', renderTo: 'user-grid', iconCls: 'icon-grid', frame: true, title: 'Users', autoScroll: true, height: 300, store: store, plugins: [editor], columns : userColumns , tbar: [{ text: 'Add', iconCls: 'silk-add', handler: onAdd }, '-', { text: 'Delete', iconCls: 'silk-delete', handler: onDelete }, '-'], viewConfig: { forceFit: true }, addRow : function(){ var u = new this.store.recordType({ first : '', last: '', email : '' }); editor.stopEditing(); this.store.insert(2,u); editor.startEditing(2); } }); /** * onDelete */ function onDelete(index) { var rec = userGrid.getSelectionModel().getSelected(); if (!rec) { return false; } userGrid.store.remove(rec); userGrid.store.remove(index); } function onAdd(btn, ev) { var u = new userGrid.store.recordType({ first : '', last: '', email : '' }); editor.stopEditing(); userGrid.store.insert(2, u); editor.startEditing(2); } });function add_row(Index) { var user = Ext.getCmp('user'); user.addRow(); //执行user里面的方法 // user.getTopToolbar().get(0).getEl().dom.click(); //模拟点击;tbar上面的点击。 }