Adding rows to grid

问题

I am trying to add rows to my grid.

I saw an example in the docs:

onAddRouteClick: function(){
    // Create a model instance
    var rec = new KitchenSink.model.grid.Plant({
        buying_vendor_id: 12,
        country_code: '1',
        route: 0
    });

    this.getStore().insert(0, rec);
    this.cellEditing.startEditByPosition({
        row: 0, 
        column: 0
    });
}

But i cant seem to make it work in my code.

This is my grid:

onBtnRoutesSearchClick: function(button, e, options){
    var me = this;
    var v_url = 'GetRoutes.jsp?' + Ext.urlEncode({'route_id': routeID, 'route_country_code' : routeCountryCode , 'route_vendor_id' : routeVendorID});

    var newTab = Ext.create('Ext.panel.Panel', {
        id: 'routes_pannel',
        title: 'Routes',
        autoScroll: true,
        layout: {
            type: 'fit'
        },
        closable: true,
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [
                    {
                        xtype: 'button',
                        id: 'buttonResetBid',
                        icon: 'images/Plus.png',
                        text: 'Add Row',
                        listeners: {
                            click: {
                                fn: me.onAddRouteClick,
                                scope: me
                            }
                        }
                    }
                ]
            }
        ],
        items:  [{
            id: 'routes_grid',
            xtype: 'gridpanel',
            autoShow: false,
            autoScroll: true,
            store:  Ext.create('Ext.data.Store', {
                fields:[
                {name: 'buying_vendor_id', type: 'int', sortType: 'asInt'},
                {name: 'country_code', type: 'int', sortType: 'asInt'},
                {name: 'route', type: 'int', sortType: 'asInt'}
                ],
                proxy: {
                    type: 'ajax',
                    timeout: 120000,
                    url: v_url,
                    reader: {
                        type: 'json',
                        root: 'data',
                        successProperty: 'success'
                    }
                },
                autoLoad: true
            }),
            columns: [
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'buying_vendor_id',
                    width: 100,
                    text: 'Buying Vendor'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'country_code',
                    width: 100,
                    text: 'Country Code'
                },
                {
                    xtype: 'gridcolumn',
                    dataIndex: 'route',
                    width: 80,
                    text: 'Route'
                }
            ],
        }]
    });

    var panel = Ext.getCmp("MainTabPanelID");
    panel.add(newTab).show();

}

Any ideas?

回答1:

1.Create your model

Ext.define('Product', {
    extend: 'Ext.data.Model', 
    fields: [
        {name: 'ProductID'},
        {name: 'ProductName'}, 
        {name: 'UnitPrice'},
        {name: 'UnitsInStock'}
    ]
});

2.create your rowEditing

var rEditor = Ext.create('Ext.grid.plugin.RowEditing', {
    clicksToEdit: 2, 
    listeners: {edit: function (editor, e) { }); } 
});

3.get Store and create your grid

var grid = Ext.create('Ext.grid.Panel', {
    store: store, 
    plugins: [rEditor], 
    title: 'Products', 
    columns: [ ], 
    dockedItems: [ { 
        xtype: 'toolbar', 
        dock: 'top', 
        items: [ { 
            xtype: 'button', 
            text: 'Yeni', 
            listeners: {
                click: {
                    fn: function () { store.insert(0, new Product()); rEditor.startEdit(0, 0); } 
                }
            }
        } ]
    } ], 
    width: 450, 
    renderTo: Ext.getElementById('hede')
});

来源：https://stackoverflow.com/questions/19209346/adding-rows-to-grid