Results 1 to 4 of 4

Thread: Problem in displaying database data into Grid using Ajax request

  1. #1

    Default Problem in displaying database data into Grid using Ajax request

    Hello,
    I am doing an app which displays database table data into grid based on Combo box selection. So on select event of combo, I want to create a grid. Grid needs to be displayed with pagination.
    For sake of pagination & database I need to send request for data through Ajax. But problem is, as Ajax requests are being asynchronous in nature,I'm not being able to return newly created grid. How can I get all the data before grid is being created?
    I am new to ExtJS. Please help . Here is what I'm doing(which is I know absolutely wrong) -->

    var form1 = new Ext.FormPanel({
    renderTo : document.body,
    id : 'form12',
    frame : true,
    title : 'Grids Demo',
    width : 500,
    height : 700,
    items :
    [
    {
    xtype : 'combo',
    name : 'tablename',
    fieldLabel : 'Select one table',
    mode : 'local',
    store : tables,
    displayField : 'tablename',
    width : 200,
    listeners : {
    select : function(f, r, i) {
    var tb = f.getValue();
    if (f.getValue() == 'Select Table') {
    Ext.Msg.alert('Message', 'Select any table.');
    }
    if (f.getValue() == 'TEST1') {
    Ext.Msg.alert('Hi','You have selected '+ f.getValue());
    var grid = createGrid(tb);

    }
    if (f.getValue() == 'TEST2') {
    Ext.Msg.alert('Hi','You have selected '+ f.getValue());
    var grid = createGrid(f.getValue());
    }
    }
    }
    },
    {
    xtype : 'panel',
    id : 'panel1',
    width : 400,
    height : 400,
    bodyBorder : true,
    border : true

    }
    ]

    });

    function createGrid(tablename)
    {
    var grid;
    Ext.Ajax.request({

    url : 'getColumns.action',
    params : {
    tablename : tablename
    },
    success: function( response, options )
    {
    temp = Ext.decode(response.responseText);
    respCol = temp.col; /*this I'm getting from response by server, where respCol : Column names
    respHdr : header with index obj & respData : table data rowwise*/
    respHdr = temp.hdr;
    respData = temp.dt;
    maxPageSize = 5;

    var arrStore = new Ext.data.ArrayStore({
    data : respData,
    storeId : 'arrStore',
    root:'col',
    fields:respCol,
    totalProperty:'tp',
    autoLoad : true

    });

    var colModel = new Ext.grid.ColumnModel({
    defaults:
    {
    sortable:false,
    menuDisabled:true
    },
    columns:respHdr
    });

    var paging = new Ext.PagingToolbar({
    store:arrStore,
    pageSize:maxPageSize,
    displayInfo:true
    });

    Ext.StoreMgr.get('arrStore').load({
    params:{
    start:0,
    limit:maxPageSize
    }
    });


    grid = new Ext.grid.GridPanel({
    id:'grid1',
    store:arrStore,
    colModel: colModel,
    renderTo:document.body,
    frame:true,
    height:250,
    stripeRows: true,
    bbar:paging
    });

    Ext.getCmp('panel1').removeAll();
    Ext.getCmp('panel1').doLayout();
    Ext.getCmp('panel1').add(grid);
    Ext.getCmp('panel1').doLayout();

    }

    });

    return grid;
    }
    });


    The response as JSON file I'm getting is as follows, which is I guess correct-->

    {success:true,col:["NAME","AGE","ID","CONTACT_NO"],hdr:[{"dataIndex":"NAME","header":"NAME"},{"dataIndex":"AGE","header":"AGE"},{"dataIndex":"ID","header":"ID"},{"dataIndex":"CONTACT_NO","header":"CONTACT_NO"}],dt:[["Gauri","22","34","455665"],["Neetika","24","45","335555"],["Pooja","23","54","333222"],["Anjali","34","22","123432"],["Ashok","32","33","122233"]]}
    The logic I've applied at java side for getting columns and data is working fine for one table. So problem is in sending request at front end.

    Thanks in advance

    Regards,
    FB

  2. #2
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    As you mention, your timing is off.

    I would suggest creating the grid and then calling your ajax.
    Upon success, you can reconfigure the grid.

    Regards,
    Scott.

  3. #3

    Default

    Thanks for reply

    Can you give me any simple example for this procedure,like creating grid first and then reconfiguring it?
    Reconfiguration needs to change store, columnmodel, selection model, right?

    Regards,
    FB

  4. #4
    Sencha - Support Team
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410

    Default

    The grid reconfigure accepts store,cm as parameters.

    Code:
    // define grid
    var grid = new Ext.grid.GridPanel({
    ..
    });
    
    Ext.Ajax.request({
    ..
        success: function( response, options ) {
             grid.reconfigure(store,cm);
        }
    });
    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •