Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

Thread: [Solved] Best practice, Two Grids and Load?

  1. #11
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336

    Default

    Thanks Wolfgang.

  2. #12
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482

    Default

    Here how i managed the gridsetup with respect to to the asynchrones loading of the datastore(s).

    In my project, the grid itself has a couple columns that uses comboboxes as editors, that maintain their own datastore. These combobox datastores do there own query and lookup the id of the corresponding column of the grid and provide a displayfield.
    Example:
    Grid: id_employee
    Combobox DS: id_employee, name_employee

    Grid: id_location
    Combobox DS: id_location, name_location
    etc.

    So i need to make sure that all datastores are loaded before rendering the grid.

    Brief description of how it works.

    - Setup a collection that maintains the state of the datastores:
    (This is maybe a bit overkill, bit i like the collection object ...)
    PHP Code:
        var loadOk = new Ext.util.MixedCollection();  // track datastore status on init 
    - Callback function / eventhandler. Because i need the load events only once, i remove the eventhandler in question afterwords.
    PHP Code:
                function dsLoadDone(storedata) {
                    
    // update store status
                    
    loadOk.replace(store.nametrue);
                    
    // remove listener because we need them just one time on initial datastore load
                    
    store.un('load'dsLoadDonethis);
                    
    // loop through the flags for all stores and see wether all are loaded
                    
    var ready;
                    
    loadOk.each(function (item) {
                        
    // the each function aborts if the result is false.
                        // so it is safe to assign item directly bc it is true or false
                        
    ready item;
                        return 
    item;
                    })
                    
    // ready must be true when all stores are loaded
                    
    if (ready) {
                        
    // all stores are loaded, lets setup the grid
                        
    setupGrid();
                    }
                } 
    - for each datastore to be loaded via XHR etc., add a name attribute (used as key in the collection) and register to the collection and the load event.
    _Maybe_ one could add the ds as an object reference to the collection, then the name attribute would not be necessary.
    However i am not sure how to pass a reference to the collection, and not a copy of the datastore object.
    PHP Code:
    //add name attribute to datastore definition:
    ...
          
    name'dsKlasse'  
    ...


    // after datastore setup
    ...
                
    loadOk.add('dsKlasse'false);
                
    dsKlasse.on('load'dsLoadDonethis'dsKlasse');
                
    dsKlasse.load();
    ... 
    -and finally the grid setup:
    PHP Code:
    function setupGrid () {
                
    grid.render();
    // do more stuff here like adding a toolbar.
    // so all the things that require the grid to be rendered

    Regards

    Wolfgang

  3. #13
    Ext User cluettr's Avatar
    Join Date
    Apr 2007
    Location
    Boston, MA
    Posts
    336

    Default

    Wolfgang, That's great... Although I haven't gone through your code in detail you seem to be providing a direct solution to the problem Good stuff!

  4. #14
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482

    Default

    Robert,

    i faced one (minor) issue.
    Everything works ok (datastores loading etc.).
    But the grids pagingbar does show the refresh button active after the grid setup, and you cannot click that button.
    Seems to be related with attaching to the load event.
    The only workaround i found was, to load the datastore again. Of cause, a more clean solution would be better.
    Here the fragment with the workaround. Any hint fix this is welcome:
    PHP Code:
                function dsLoadDone(storedata) {
                    
    // update store status
                    
    loadOk.replace(store.nametrue);
                    
    // remove listener because we need them just one time on initial datastore load
                    
    store.un('load'dsLoadDonethis);
                    
    // loop through the flags for all stores and see wether all are loaded
                    
    var ready;
                    
    loadOk.each(function (item) {
                        
    // the each function aborts if the result is false.
                        // so it is safe to assign item directly bc it is true or false
                        
    ready item;
                        return 
    item;
                    })
                    
    // ready must be true when all stores are loaded
                    
    if (ready) {
                        
    // all stores are loaded, lets setup the grid
                        // FIX to get the load indicator back to work
                        
    ds.load();
                        
    setupGrid();
                    }
                } 

  5. #15
    Sencha User
    Join Date
    Jan 2014
    Location
    pittsburg , PA
    Posts
    32

    Default

    Hi i faced issue while running my code, this.do error.
    i got this error once the debugger is coming to renderTo: document.body line. where i made a mistake.

    Greetings !

    Code:
    Ext.QuickTips.init();
    
                var xg = Ext.grid;
    
                var reader = new Ext.data.Record.create({
                    fields: [
                         { name: 'seattype', type: 'string' },
                         { name: 'quantity', type: 'float' },
                         { name: 'mrc', type: 'float' },
                         { name: 'nrc', type: 'float' },
                         { name: 'extmrc', type: 'float' },
                         { name: 'extnrc', type: 'float' }
                    ]
    
                });
             // Ext.grid.GridView.c
                // define a custom summary function
                Ext.grid.GridSummary.Calculations['totalExtMrc'] = function(v, record, field) {
                    return v + (record.data.mrc * record.data.quantity);
                }
                Ext.grid.GridSummary.Calculations['totalExtNrc'] = function(v, record, field) {
                    return v + (record.data.nrc * record.data.quantity);
                }
    
                var summary = new Ext.grid.GridSummary();
    
                var grid = new xg.EditorGridPanel({
                    
    
                    columns: [
                         {
                             id: 'seattype',
                             header: "Seat Type",
                             width: 80,
                             sortable: true,
                             dataIndex: 'seattype',
                             summaryType: 'count',
                             hideable: false                         
                         },
                         {
                             header: "Quantity",
                             width: 20,
                             sortable: true,
                             dataIndex: 'quantity',
                             summaryType: 'sum',
                         //    renderer: function(v) {
                         //        return v + ' hours';
                         //    },
                             editor: new Ext.form.NumberField({
                                 allowBlank: false,
                                 allowNegative: false,
                                 style: 'text-align:left'
                             })
                         }, {
                             header: "MRC",
                             width: 20,
                             sortable: true,
                             renderer: Ext.util.Format.usMoney,
                             dataIndex: 'mrc',
                             summaryType: 'average'                         
                         }, {
                             header: "NRC",
                             width: 20,
                             sortable: true,
                             renderer: Ext.util.Format.usMoney,
                             dataIndex: 'nrc',
                             summaryType: 'average'
                         }, {
                             id: 'extmrc',
                             header: "EXT.MRC",
                             width: 20,
                             sortable: false,
                             groupable: false,
                             renderer: function(v, params, record) {
                                 return Ext.util.Format.usMoney(record.data.mrc * record.data.quantity);
                             },
                             dataIndex: 'extmrc',
                             summaryType: 'totalExtMrc',
                             summaryRenderer: Ext.util.Format.usMoney
                         }, {
                             id: 'extnrc',
                             header: "EXT.NRC",
                             width: 20,
                             sortable: false,
                             groupable: false,
                             renderer: function(v, params, record) {
                                 return Ext.util.Format.usMoney(record.data.nrc * record.data.quantity);
                             },
                             dataIndex: 'extnrc',
                             summaryType: 'totalExtNrc',
                             summaryRenderer: Ext.util.Format.usMoney
                         }
                    ],
    
                    view: new Ext.grid.GroupingView({
                        forceFit: true,
                        showGroupName: false,
                        enableNoGroups: false, // REQUIRED!
                        hideGroupedColumn: true
                    }),
    
                    plugins: summary,
    
                    frame: true,
                    width: 800,
                    height: 450,
                    clicksToEdit: 1,
                    collapsible: true,
                    animCollapse: false,
                    trackMouseOver: false,
                    //enableColumnMove: false,
                    title: 'Hosted VoIP GUI',
                //    iconCls: 'icon-grid',
                    renderTo: document.body
                });
          
    
            Ext.grid.dummyData = [
                        {seattype: 'Basic Seats', mrc: 17, nrc : 59},
                        { seattype: 'Conference Room Seats', mrc: 22, nrc: 59 },
                        { seattype: 'Standard Seats', mrc: 22, nrc: 59 },
                        { seattype: 'Premium Seats', mrc: 25, nrc: 59 },
                        { seattype: 'Receptionist Seats', mrc: 25, nrc: 59 },
                        { seattype: 'Hunt Group', mrc: 1, nrc: 4.95 },
                        { seattype: 'Auto Attendant', mrc: 10, nrc: 14.95 },
                        { seattype: 'Anywhere Number(s)', mrc: 10, nrc: 21.95 },
                        { seattype: 'Softphone', mrc: 49.95, nrc: 0.00 },
                        { seattype: 'Receptionist Software Console', mrc: 0, nrc: 49 },
                        { seattype: 'Voice Mail (TUI Only)', mrc: 0, nrc: 5.95 },
                        { seattype: 'Available TNs', mrc: 0, nrc: 4.95 }
                ] ;

  6. #16
    Sencha User
    Join Date
    Jan 2014
    Location
    pittsburg , PA
    Posts
    32

    Default

    Am using Extjs 2.3 version.

    Thanks !

Page 2 of 2 FirstFirst 12

Posting Permissions

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