1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    3
    Vote Rating
    0
    bloem is on a distinguished road

      0  

    Default Grid not display ajax'd data until column resize

    Grid not display ajax'd data until column resize


    Hello all,

    I'm using the code below to retrieve the data from the server, but the grid isn't displaying anything until one of the columns has been resized. Obviously it is not doing a reflow of the whole layout.

    'gridloc' is the id of a div placeholder.

    Any obvious mistakes I'm making?

    Thanks for your braintime.

    BB

    Ext.require([
    'Ext.grid.*',
    'Ext.data.*'
    ]);

    Ext.onReady(function(){

    Ext.define('VideoSession', {
    extend: 'Ext.data.Model',
    fields: ['lid',
    'Sales rep',
    'Date & Time',
    'Session length (HH:MM:SS)',
    'Car details',
    'Satisfaction Level 0 to 10',
    'Recommend to Friends Y/N',
    'Comments',
    'Video link']
    });

    var store = new Ext.data.Store({
    model: 'VideoSession',
    proxy: {
    type: 'ajax',
    url: '../statsdata.php',
    extraParams: {
    location: lid
    },
    reader: {
    type: 'json',
    root: 'stats'
    }
    },
    autoLoad: true
    });

    Ext.create('Ext.grid.Panel', {
    title: 'Video Sessions',
    store: store,
    columns: [
    Ext.create('Ext.grid.RowNumberer'),
    {header: 'Sales rep', dataIndex: 'Sales rep', flex: 1},
    {header: 'Date & Time', dataIndex: 'Date & Time', flex: 2},
    {header: 'Session length (HH:MM:SS)', dataIndex: 'Session length (HH:MM:SS)', flex: 2},
    {header: 'Car details', dataIndex: 'Car details', flex: 1},
    {header: 'Satisfaction Level 0 to 10', dataIndex: 'Satisfaction Level 0 to 10', flex: 1},
    {header: 'Recommend to Friends Y/N', dataIndex: 'Recommend to Friends Y/N', flex: 1},
    {header: 'Comments', dataIndex: 'Comments', flex: 3},
    {header: 'Video link', dataIndex: 'Video link', flex: 2,
    renderer: function(value) {
    return Ext.String.format('<a href="{0}" target="_blank">{1}</a>', value, value);
    }
    }
    ],
    renderTo: 'gridloc'
    });
    });

  2. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    3
    Vote Rating
    0
    bloem is on a distinguished road

      0  

    Default


    Ah ok, figured it out myself: you have to put your grid in a Viewport first:

    var grid = new Ext.grid.Panel({
    ... lots of code as before, except the renderTo line ...
    });


    Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    renderTo: Ext.getBody(),
    items: grid
    });

    Easy when you know how.

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    You don't need to set renderTo for Ext.container.Viewport.

    renderTo would work if you had an element with the gridloc id.

    Were you doing that inside of Ext.onReady?!?

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    3
    Vote Rating
    0
    bloem is on a distinguished road

      0  

    Default


    Ah thanks for the renderTo/Viewport tip.

    All of this is inside Ext.onReady()

    BB

Similar Threads

  1. Row Height Resize in Grid (Same as Column Resize)
    By lukefowell89 in forum Ext 3.x: Help & Discussion
    Replies: 8
    Last Post: 31 May 2012, 4:33 AM
  2. How to display a field in a combobox and sent the data from another column?
    By linker85 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 16 Jul 2009, 12:13 AM
  3. Replies: 1
    Last Post: 28 Jan 2008, 9:42 AM

Thread Participants: 1

Tags for this Thread