Question

我正在尝试向网格中添加行。

我在文档中看到了一个例子：

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
});

}

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

但我似乎无法让它在我的代码中运行。

这是我的网格：

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();

Answer 1

1.创建模型

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

2.创建你的rowEditing

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

3.get存储并创建网格

 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')
});

Answer 2

所以你试图将add记录转移到store对吗？好的，我们来看看商店API http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-add

样本用法：

   myStore.add({some: 'data'}, {some: 'other data'});

最佳做法是创建一个Model类。阅读网格上的组件guides和data package。

向网格添加空行

2 个答案: