Extjs 3.0 Grid Panel issue

[madipally]

Hi,

I am working with extjs 3.0 , trying to get the columns from the database and display in the grid panel. I am able to get the columns and displaying them, but unable to access the grid in the handler function.

Here is my code...

Ext.Ajax.request(
{

url: '/testdata_import',
success: function(response)
{

var data = Ext.decode(response.responseText);
createGrid(data.columndata);

}

});

var store = new Ext.data.JsonStore(
{

url: '/testdata_import',
root: 'TestData', // required!
fields: ['column1','column2']

});

var createGrid = function(columndata)
{

grid = new Ext.grid.GridPanel({
store: store,
columns: columndata,
border : true,
//stripeRows: true,
height: 240,
width:350,
title:'',
plugins: [Ext.ux.grid.DataDrop],
bbar: [

{

id: 'btn_save',
text: 'Save And Close',
disabled: false,
handler: importData

}],

});

}

function importData()
{

grid.getSelectionModel().selectAll();

}

/*********** Code ends here *******/

When clicking on 'Save and Close' defined in bbar , 'grid is not defined' error is throwing.

Please help me to resolve this issue.


Thanks
Naveen Kumar Madipally

[madipally]

Hi,

my self got resolved the issue , the solution is i have loaded the grid and the window which holds the grid in Ajax response itself.

Following is the code,

createGrid();

function createGrid()
{
Ext.Ajax.request(
{
url: '/testdata_import',
success: function(response)
{
var data = Ext.decode(response.responseText);
cols = data.columndata;

var store = new Ext.data.JsonStore(
{
url: '/testdata_import',
root: 'TestData', // required!
fields: ['coloumn1','column2']
});

grid = new Ext.grid.GridPanel({
store: store,
columns: cols,
border : true,
//stripeRows: true,
height: 240,
width:350,
title:'',
plugins: [Ext.ux.grid.DataDrop],
bbar: [
{
id: 'btn_save',
text: 'Save And Close',
disabled: false,
handler: function()
{
for (var i = 0; i < grid.getStore().data.length; i++)
{
var element = Ext.get(grid.getView().getRow(i));
var record = grid.getStore().getAt(i);
}


grid.getSelectionModel().selectAll();
var sm = grid.getSelectionModel();
var sel = sm.getSelections();
var data = '';
for (i = 0; i<sel.length; i++)
{
for (var j = 0; j<grid.getColumnModel().getColumnCount(); j++)
{
data = data + sel[i].get( grid.getColumnModel().getDataIndex(j)) + ';'

}
data = data + '||';

}

Ext.Ajax.request({
url: '/testdata_import?qry=update',
method: 'POST',
params: { postdata: data }
});

var childWin = Ext.getCmp('win_import');
childWin.close();
}
}],
});

var win = new Ext.Window ({
height: 300,
width: 400,
id:'win_import',
title: 'Import TestData from Excel',
modal : true,
defaults: {border:false},
items: [{
bodyStyle: 'padding:10px',
items:[grid],
}]
});
win.show();
}
});
}

Hope, the code may help others..

Thanks
Naveen Kumar Madipally