Adding rows to grid - extjs

Question

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?

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