向网格添加空行 [英] Adding an empty row to a 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 
}）; 
  

}

  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 ：我
} 
} 
} 
] 
} 
]，
项：[{
 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'} 
]，
代理：{
类型：'ajax'，
超时：120000，
 url：v_url，
 reader：{
 type：'json'，
 root：'data'，
 successProperty：'success'
} 
}，
 autoLoad ：
}），
列：[
 {
 xtype：'gridcolumn'，
 dataIndex：'buy_vendor_id'，
 width：100，
文本：'买卖商'
}，
 {
 xtype：'gridcolumn'，
 dataIndex：'country_code'，
 width：100，
 text ：'国家代码'
}，
 {
 xtype：'gridcolumn'，
 dataIndex：'route'，
 width：80，
 text： '路线'
} 
]，
}] 
}）; 
 
 var panel = Ext.getCmp（MainTabPanelID）; 
 panel.add（newTab）.show（）; 
  

解决方案

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 ：'产品'，
列：
 [
]，
 dockedItems：
 [
 {
 xtype：'toolbar'，
 dock：'top'，
 items：
 [
 {
 xtype：'button'，
 text：'Yeni'，
 listeners： 
 {
点击：
 {
 fn：function（）{
 
 store.insert（0，new Product（））; 
 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
});

}

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

解决方案

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屋！