Results 1 to 5 of 5

Thread: Grid refresh

  1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default Grid refresh

    i have an ext chart and when i click a bar it loads a store and populates a grid panel.
    when i click the bar again or another bar the store reloads new data but grid panel does not refresh.

    how can i refresh or reload grid when store is reloaded? should it reload grid panel automatically?

    facGridPanel = Ext.create('Ext.grid.Panel', {
    store: facilityReqStore,
    columns: facilityGridCol,
    border: false,
    frame: false,
    columnLines: true,
    height: 695,
    viewConfig: {
    forceFit: true,
    stripe: true,
    enableTextSelection: true ,
    emptyText: '<center><b>No Results to Display</b></center>'
    },
    renderTo:'reqDivTable',


    selModel: facilitySelModel
    });
    }

    facilityReqStore.load({
    params: {
    processorName: 'FacilityProcessor',
    processorAction: 'getFacRequisitionDetails',
    facilityId: facilityIdVal,
    reqTypeComboVal: reqTypeComboVal,
    patType:patTypeVal,
    DrawDate:drawDateVal
    }
    });

  2. #2
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default

    when i load store it renders grid to Div but when i click and reload store it renders a second grid. i want it to reload the first grid or destroy it and show new grid.

  3. #3
    Sencha User
    Join Date
    Apr 2017
    Posts
    2

    Default

    Did you ever solve this? I am having a similiar issue with my chart has a itemclicked event that fires the datastore retrieve which works, but the grid doesn't load the new data, it generates a new grid because everythign is within the listener event.

  4. #4
    Sencha User
    Join Date
    Jul 2010
    Posts
    46
    Answers
    3

    Default

    yes,it's resolved. don't remember exactly what fixed it.

    looks like just an ajax call when you click bar and loads store. Store.load( params: {..............

    this clears the grid.

    $("#chartDiv").click(function() {
    facGridPanel.getStore().removeAll();
    facGridPanel.getStore().sync();

    document.getElementById('headingDiv').style.display = 'none';
    document.getElementById('headingDiv').value = '';
    });

  5. #5
    Sencha User
    Join Date
    Apr 2017
    Posts
    2

    Default

    Quote Originally Posted by mdarretta View Post
    yes,it's resolved. don't remember exactly what fixed it.

    looks like just an ajax call when you click bar and loads store. Store.load( params: {..............

    this clears the grid.

    $("#chartDiv").click(function() {
    facGridPanel.getStore().removeAll();
    facGridPanel.getStore().sync();

    document.getElementById('headingDiv').style.display = 'none';
    document.getElementById('headingDiv').value = '';
    });

    Thanks for the quick response.

    how are you generating you datastore?

    I create mine using " storecbrnDtl = Ext.create('Ext.data.JsonStore', {
    autoLoad: true,
    fields: [
    { name: 'sub_org_id', type: 'string' },
    { name: 'assm_id', type: 'string' },
    { name: 'sub_assm', type: 'string' },
    { name: 'bcn', type: 'string' },
    { name: 'item_id_display', type: 'string' },
    { name: 'exp_dt', type: 'string' },
    { name: 'exp_ext_dt', type: 'string' },
    { name: 'loc_id', type: 'string' },
    { name: 'asofmonth', type: 'string' },
    { name: 'within_range', type: 'string' }
    ],
    proxy: {
    type: 'ajax',
    extraParams: {
    lsran: lsran,
    lasofmo: lasofmo
    },
    reader: {
    type: 'json',
    rootProperty: 'data',
    implicitIncludes: false
    },
    url: './resources/cfm/appcall_cbrn.cfm?remoteEvent=get_cbrn_detail'
    }
    });

    cbrnGrid = new Ext.create('Ext.grid.Panel', {
    xtype: 'grid-filtering',
    title: 'CBRN Details',
    renderTo: 'chartcbrn4',
    collapsible: false,
    columnLines: true,
    width: 900,
    height: 275,
    resizable: false,
    plugins: ['gridfilters', 'gridexporter'],
    emptyText: 'No Matching Records',
    loadMask: true,
    stateful: true,
    stateId: 'stateful-filter-grid',
    store: storecbrnDtl,
    defaultListenerScope: true,
    columns: [
    { dataIndex: 'sub_org_id', text: 'Sub Org Id', width: 95, align: 'center', filter: 'list' },
    { dataIndex: 'assm_id', text: 'Assembly ID', width: 105, align: 'center', filter: 'list' },
    { dataIndex: 'sub_assm', text: 'Sub Assembly', width: 115, align: 'center', filter: 'list' },
    { dataIndex: 'bcn', text: 'BCN', width: 75, align: 'center', filter: 'list' },
    { dataIndex: 'item_id_display', text: 'Item ID', width: 120, align: 'center', filter: 'list' },
    { dataIndex: 'exp_dt', text: 'Expiration Date', width: 120, align: 'center', filter: 'list', renderer: showBox },
    { dataIndex: 'exp_ext_dt', text: 'Expiration Ext Date', width: 145, align: 'center', filter: 'list', renderer: showBoxExt },
    { dataIndex: 'loc_id', text: 'Location ID', width: 100, filter: 'list', renderer: showBoxLoc },
    { dataIndex: 'asofmonth', text: 'AsOf Month', width: 120, filter: 'list', align: 'center' }
    ],
    onClearFilters: function () {
    this.filters.clearFilters();
    },
    header: {
    itemPosition: 1, // after title before collapse tool
    items: [{
    ui: 'default-toolbar',
    xtype: 'button',
    text: 'Clear Filters',
    width: 100,
    height: 30,
    handler: 'onClearFilters'
    },{
    ui: 'default-toolbar'
    },{
    ui: 'default-toolbar',
    xtype: 'button',
    width: 100,
    height: 30,
    text: 'Export to ...',
    menu: {
    items: [{
    text: 'Excel',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'excel07',title: 'CBRN Detail Export',fileName: 'CbrnDetail.xlsx'});
    }
    },{
    text: 'XML',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'excel03',title: 'CBRN Detail Export',fileName: 'CbrnDetail.xml'});
    }
    },{
    text: 'HTML',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'html',title: 'CBRN Detail Export',fileName: 'CbrnDetail.html'});
    }
    }]
    }
    }]
    }
    })

    So, when I try to issue the commands you have referenced:

    cbrnGrid.getStore().removeAll();
    cbrnGrid.getStore().sync();

    I get the error getStore is not a function. & sync is not a function.

  6. #6
    Sencha User
    Join Date
    May 2017
    Location
    Turin
    Posts
    8

    Default

    +1 bugs bunny

  7. #7
    Sencha User
    Join Date
    Apr 2017
    Posts
    2

    Default

    Quote Originally Posted by Bugs_Bunny View Post
    Thanks for the quick response.

    how are you generating you datastore?

    I create mine using " storecbrnDtl = Ext.create('Ext.data.JsonStore', {
    autoLoad: true,
    fields: [
    { name: 'sub_org_id', type: 'string' },
    { name: 'assm_id', type: 'string' },
    { name: 'sub_assm', type: 'string' },
    { name: 'bcn', type: 'string' },
    { name: 'item_id_display', type: 'string' },
    { name: 'exp_dt', type: 'string' },
    { name: 'exp_ext_dt', type: 'string' },
    { name: 'loc_id', type: 'string' },
    { name: 'asofmonth', type: 'string' },
    { name: 'within_range', type: 'string' }
    ],
    proxy: {
    type: 'ajax',
    extraParams: {
    lsran: lsran,
    lasofmo: lasofmo
    },
    reader: {
    type: 'json',
    rootProperty: 'data',
    implicitIncludes: false
    },
    url: './resources/cfm/appcall_cbrn.cfm?remoteEvent=get_cbrn_detail'
    }
    });

    cbrnGrid = new Ext.create('Ext.grid.Panel', {
    xtype: 'grid-filtering',
    title: 'CBRN Details',
    renderTo: 'chartcbrn4',
    collapsible: false,
    columnLines: true,
    width: 900,
    height: 275,
    resizable: false,
    plugins: ['gridfilters', 'gridexporter'],
    emptyText: 'No Matching Records',
    loadMask: true,
    stateful: true,
    stateId: 'stateful-filter-grid',
    store: storecbrnDtl,
    defaultListenerScope: true,
    columns: [
    { dataIndex: 'sub_org_id', text: 'Sub Org Id', width: 95, align: 'center', filter: 'list' },
    { dataIndex: 'assm_id', text: 'Assembly ID', width: 105, align: 'center', filter: 'list' },
    { dataIndex: 'sub_assm', text: 'Sub Assembly', width: 115, align: 'center', filter: 'list' },
    { dataIndex: 'bcn', text: 'BCN', width: 75, align: 'center', filter: 'list' },
    { dataIndex: 'item_id_display', text: 'Item ID', width: 120, align: 'center', filter: 'list' },
    { dataIndex: 'exp_dt', text: 'Expiration Date', width: 120, align: 'center', filter: 'list', renderer: showBox },
    { dataIndex: 'exp_ext_dt', text: 'Expiration Ext Date', width: 145, align: 'center', filter: 'list', renderer: showBoxExt },
    { dataIndex: 'loc_id', text: 'Location ID', width: 100, filter: 'list', renderer: showBoxLoc },
    { dataIndex: 'asofmonth', text: 'AsOf Month', width: 120, filter: 'list', align: 'center' }
    ],
    onClearFilters: function () {
    this.filters.clearFilters();
    },
    header: {
    itemPosition: 1, // after title before collapse tool
    items: [{
    ui: 'default-toolbar',
    xtype: 'button',
    text: 'Clear Filters',
    width: 100,
    height: 30,
    handler: 'onClearFilters'
    },{
    ui: 'default-toolbar'
    },{
    ui: 'default-toolbar',
    xtype: 'button',
    width: 100,
    height: 30,
    text: 'Export to ...',
    menu: {
    items: [{
    text: 'Excel',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'excel07',title: 'CBRN Detail Export',fileName: 'CbrnDetail.xlsx'});
    }
    },{
    text: 'XML',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'excel03',title: 'CBRN Detail Export',fileName: 'CbrnDetail.xml'});
    }
    },{
    text: 'HTML',
    handler: function () {
    cbrnGrid.saveDocumentAs({type: 'html',title: 'CBRN Detail Export',fileName: 'CbrnDetail.html'});
    }
    }]
    }
    }]
    }
    })

    So, when I try to issue the commands you have referenced:

    cbrnGrid.getStore().removeAll();
    cbrnGrid.getStore().sync();

    I get the error getStore is not a function. & sync is not a function.

    i resolved the issue by removing and adding back the grid like this:

    var tempRef = Ext.getCmp("tabcbrn");
    tempRef.remove(Ext.getCmp('chartcbrnb'), true);
    tempRef.updateLayout();
    tempRef.add({ id: 'chartcbrnb', html: '<div id="chartcbrn4" width="900" height="275"></div>', width: 900, height: 275, colspan: 2 });
    tempRef.updateLayout();

Similar Threads

  1. Replies: 6
    Last Post: 15 Apr 2016, 2:35 PM
  2. Replies: 3
    Last Post: 27 Sep 2011, 1:10 PM
  3. Replies: 0
    Last Post: 3 Mar 2011, 4:39 AM
  4. Replies: 0
    Last Post: 21 Aug 2009, 1:58 PM
  5. Replies: 0
    Last Post: 21 May 2009, 7:06 AM

Tags for this Thread

Posting Permissions

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