向网格添加行 [英] Adding rows to grid

问题描述

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

  onAddRouteClick：function（）{
 //创建一个模型实例
 var rec = new KitchenSink.model.grid.Plant（{
 purchases_vendor_id：12 ，
 country_code：'1'，
 route：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： 
布局：{
类型：'fit'
}，
 closable：true，
 dockedItems：[
 {
 xtype： 'toolbar'，
 dock：'top'，
 items：[
 {
 xtype：'button'，
 id：'buttonResetBid'，
图标：'images / Plus.png'，
 text：'Add Row'，
 listeners：{
 click：{
 fn：me.onAddRouteClick，
 scope ：我
} 
} 
} 
] 
} 
 ]，
 items：[{
 id：'routes_grid'，
 xtype：'gridpanel'，
 autoShow：false，
 autoScroll：true，
 store：Ext.create（'Ext.data.Store'，{
 fields：[
 {name：'buyer_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 
 }），
列：[
 {
 xtype：'gridcolumn'，
 dataIndex：'buy_vendor_id'，
 width：100，
 text：'购买卖方'
}，
 {
 xtype：'gridcolumn'，
 dataIndex：'country_code'，
 width：100，
 text：'国家代码'
}，
 {
 xtype：'gridcolumn'，
 dataIndex：'route'，
 width：80，
 text：'Route' 
} 
]，
}] 
}）; 
 
 var panel = Ext.getCmp（MainTabPanelID）; 
 panel.add（newTab）.show（）; 
  

}

任何想法？ p>

解决方案

1.创建模型

  Ext.define（'Product'，{
 extends：'Ext.data.Model'，
 fields：[
 {name：'ProductID'}，
 {name ：'ProductName'}，
 {name：'UnitPrice'}，
 {name：'UnitsInStock'} 
] 
}）; 
  

2.创建你的行编辑

  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，新产品（））; rEditor.startEdit（0，0）;} 
} 
} 
}] 
}]，
 width：450，
 renderTo：Ext.getElementById（'hede'）
}）; 
  

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

这篇关于向网格添加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！