Adding an empty row to a 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
});
}
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();

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

Answer 2

So you are trying to add a record to store right?
OK, lets look at the Store API
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.data.Store-method-add
Sample usage:
myStore.add({some: 'data'}, {some: 'other data'});
The best practice is to also create a Model class . Read the component guides on grid and the data package .