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-response

var 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 immeditately

store.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' οnclick='add_row("+rowIndex+");'/> " +

                "<input type='button' name='"+val.name+"opt_type' value='del' οnclick=''/>";

        }}];

 

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上面的点击。

 

 

}

转载于:https://www.cnblogs.com/holyes/archive/2012/06/26/f3570455c5db2eebd104002ba7d4d00a.html