1. #1
    Sencha User madipally's Avatar
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    madipally is on a distinguished road

      0  

    Default Extjs 3.0 Grid Panel issue

    Extjs 3.0 Grid Panel issue


    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

  2. #2
    Sencha User madipally's Avatar
    Join Date
    May 2012
    Posts
    6
    Vote Rating
    0
    madipally is on a distinguished road

      0  

    Default Solved

    Solved


    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

Tags for this Thread