1. #1
    Sencha User
    Join Date
    Aug 2009
    Posts
    20
    Vote Rating
    0
    gabrieaj is on a distinguished road

      0  

    Default Loadmask on Filtering

    Loadmask on Filtering


    Hi,

    I have a filter panel which when the user inputs the value, filters out the gridpanel below it.
    When the grouped grid panel is loaded for the first time without applying the filters, it shows the loadmask.
    Grouped Grid panel needs to show the loadmask again when filters are being applied.
    How do i show the loadmask again and again when filters are being applied.

    Thanks for the help in advance.

    Thanks & Regards,
    Ajay.

  2. #2
    Ext User dommellenny's Avatar
    Join Date
    Oct 2009
    Location
    Geel, Belgium
    Posts
    23
    Vote Rating
    0
    dommellenny is on a distinguished road

      0  

    Default


    could you post your code please so i can have a look?

  3. #3
    Sencha User
    Join Date
    Aug 2009
    Posts
    20
    Vote Rating
    0
    gabrieaj is on a distinguished road

      0  

    Default Code for the loadmask with gridview filter

    Code for the loadmask with gridview filter


    Hi Dommellenny,

    Thanks for the help.
    Below is the code snippet :

    Code:
    Ext.onReady(function(){
                 var subCatcombo = new Ext.form.ComboBox({
                     id:'subCatCombo',
                     triggerAction: 'all',
                     width:180,
                     store : subCatStore, //instance of Ext.data.Store  store
                     fieldLabel: 'Sub Category',
                     hideLabel : false,
                     displayField : 'subCatEF',
                     valueField : 'subCatEF',
                     value : 'All',
                     forceSelection : true,
                     selectOnFocus : true,
                     editable : false,
                     style:'font-family:tahoma; font-size:11px; width:180px;',
                     renderTo: 'div_subCat'
                   });
                                                               
                  var phase = new Ext.form.ComboBox({
                     id:'phaseCombo',
                     triggerAction: 'all',
                     width:80,
                     store : phaseStore, //instance of Ext.data.Store store
                     fieldLabel: 'Phase',
                     hideLabel : false,
                     displayField : 'phaseEF',
                     valueField : 'phaseEF',
                     value : 'All',
                     forceSelection : true,
                     editable : false,
                     renderTo: 'div_phase',
                      style:'font-family:tahoma; font-size:11px; width:80px;'
                   });
                                                               
                   var region = new Ext.form.ComboBox({
                                     id:'regionCombo',
                                     triggerAction: 'all',
                                     width:65,
                                     store : regionStore, //instance of Ext.data.Store store
                                     fieldLabel: 'Region',
                                     hideLabel : false,
                                     displayField : 'regionEF',
                                     valueField : 'regionEF',
                                     value : 'All',
                                     forceSelection : true,
                                     selectOnFocus : true,
                                     editable : false,
                                     renderTo: 'div_region',
                                     style:'font-family:tahoma; font-size:11px; width:60px;'
                                 });
                                                                       
                   var filterSub = new Ext.Button({
                                    id: 'filterSubEF',
                                    region: 'center',
                                    text: 'Filter',
                                    renderTo: 'div_filterSub',
                                    formBind: true,
                                    scope: this,
                                    handler: applyFilterToGrid
                                });
            
                   filterSub.on('click', applyFilterToGrid, this);
                                                               
                    var myGrid = new Ext.grid.GridPanel({
                    
                        store: myGroupingTableStore, //instance of Ext.data.GroupingStore
                        columns: [{ header: 'Brand Name', width: 200, sortable: true, dataIndex: 'brand_name'},
                                  {id: 'team_col', width: 250, sortable: true, dataIndex: 'indication_name'  },
                                  {header: 'Company', width: 100, sortable: true, dataIndex: 'company_name', resizable: false },
                                  {header: 'Sub Category', width: 200, sortable: true, dataIndex: 'sub_category_name' },
                                  {header: 'Region', width: 60, sortable: true, dataIndex: 'region_name'},
                                  {header: 'Phase',width: 70,sortable: true,dataIndex: 'phase_name'},
                                  { header: 'Launch Date',width: 80,sortable: true,dataIndex: 'launch_date',renderer: Ext.util.Format.dateRenderer('M-y')},
                                  {header: 'Sales FY-1',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fym1',summaryType: 'sum',renderer: Ext.util.Format.numberRenderer('0.00')},
                                  {header: 'Sales FY0',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fy0',renderer: Ext.util.Format.numberRenderer('0.00')},
                                  {header: 'Sales FY1',width: 80,sortable: true,align: 'right',dataIndex: 'sales_fy1',renderer: Ext.util.Format.numberRenderer('0.00')}
                                 ],
                        view: new Ext.grid.GroupingView({
                            forceFit: true,
                            hideGroupedColumn: true,
                            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                        }),
                        disableSelection: true,
                        loadMask: new Ext.LoadMask(Ext.getBody(), {
                            msg: "Loading..."
                        }),
                        delay: 400,
                        listeners: {
                            render: function(grid){ //load the store when the grid is rendered
                                grid.loadMask.show();
                                var store = grid.getStore();
                                store.load.defer(20, store); //give the mask a chance to render
                            }
                        }
                    });
                                                                   
                    var viewport = new Ext.Viewport( {
                                                                                             layout : 'border',
                                                                                             renderTo : Ext.getBody(),
    
                                                                                             items : [ {
                                                                                                region : 'north',
                                                                                                xtype : 'panel',
                                                                                                height : 193,
                                                                                                applyTo : 'TOP',
                                                                                                border : false
                                                                                             }, {
                                                                                                region : 'center',
                                                                                                xtype : 'panel',
                                                                                                layout : 'fit',
                                                                                                split : true,
                                                                                                items : [ myGrid ]
                                                                                             } ]
                                                                                                    });
                                                                       
                      // functions
                                        function applyFilterToGrid() {
    
                                             var subCatName = Ext.getDom('subCatCombo').value;
                                                var regionName = Ext.getDom('regionCombo').value;
                                                var phaseName = Ext.getDom('phaseCombo').value;
    
    
                                                myGroupingTableStore.clearFilter(false);
                                                myGroupingTableStore.filterBy(function(record,id){
                                                        if((subCatName != "All") && (phaseName == "All") && (regionName == "All")) {
                                                                     return (record.get('sub_category_name')== subCatName);
                                                        } else if((subCatName == "All") && (phaseName != "All") && (regionName == "All")) {
                                                                     return (record.get('phase_name') == phaseName);
                                                        } else if((subCatName == "All") && (phaseName == "All") && (regionName != "All")) {
                                                                        return (record.get('region_name') == regionName);
                                                        } else if((subCatName != "All") && (phaseName != "All") && (regionName == "All")) {
                                                                     return ((record.get('sub_category_name')== subCatName) && (record.get('phase_name') == phaseName));
                                                        } else if((subCatName != "All") && (phaseName != "All") && (regionName != "All")) {
                                                                     return ((record.get('sub_category_name')== subCatName) && (record.get('phase_name') == phaseName) && (record.get('region_name') == regionName));
                                                        }
                                                        return true;                            
                                                 });
                                            }
                                            
                                            
                                            // Tried below with the events but this doesn't work.
                                            myGrid.getStore().addListener('datachanged', function(){
                                                    myGrid.loadMask.show();
                                            }, myGrid);
                                            myGrid.getStore().addListener('load', function(){
                                                            myGrid.loadMask.disable();
                                            }, myGrid);
                                            myGrid.getStore().addListener('loadexception', function(){
                                                        myGrid.loadMask.disable();
                                             }, myGrid);
    
    }); // onReady

    apologies for the formatting of code....
    all stores have predefined format and values are fetched from java web services.

    Thanks & Regards,
    Ajay.

  4. #4
    Ext User uniring's Avatar
    Join Date
    Mar 2009
    Posts
    36
    Vote Rating
    0
    uniring is on a distinguished road

      0  

    Default


    Theorically if you've setup your mask using the loadMask config of your grid, doing a grid.getStore().load() or .reload() shows automatically the mask. Alternally you can create a new mask for the grid element and show/hide it manually.
    Project manager / coder @ xDesk ERP

  5. #5
    Sencha User
    Join Date
    Aug 2009
    Posts
    20
    Vote Rating
    0
    gabrieaj is on a distinguished road

      0  

    Default


    Hi,

    I have tried with the grid.clearfilter() event 'datachanged' in the code, however it does not work.


    Code:
         // Tried below with the events but this doesn't work.
          myGrid.getStore().addListener('datachanged', function(){
              myGrid.loadMask.show();
          }, myGrid);
          myGrid.getStore().addListener('load', function(){
                myGrid.loadMask.disable();
          }, myGrid);
          myGrid.getStore().addListener('loadexception', function(){
             myGrid.loadMask.disable();
          }, myGrid);
    if i remove the 'load' and 'loadexception' event listener, the mask remains foreever.
    Maybe there is some way of delaying it when the grid is loading it.


    Thanks for the help in advance.

  6. #6
    Ext User uniring's Avatar
    Join Date
    Mar 2009
    Posts
    36
    Vote Rating
    0
    uniring is on a distinguished road

      0  

    Default


    I think your problem is that you're passing an Ext.LoadMask element instead of a config to the loadMask on your grid, try changing it and the mask should work automatically, you doesn't need to show / hide it every time.

    Code:
    loadMask: {
        msg: "Loading..."
    },
    Project manager / coder @ xDesk ERP

  7. #7
    Sencha User
    Join Date
    Aug 2009
    Posts
    20
    Vote Rating
    0
    gabrieaj is on a distinguished road

      0  

    Default


    Hi,

    Thanks for the reply.

    I tried doing it in the code below however it firebug reports an error.


    Code:
    var myGrid = new Ext.grid.GridPanel({
              store: myGroupingTableStore, //instance of Ext.data.GroupingStore
    ....... loadMask: { msg: "Loading..." }, delay: 400, listeners: {
    render: function(grid){ //load the store when the grid //is rendered grid.loadMask.show(); var store = grid.getStore(); store.load.defer(20, store); //give the mask a chance //to render
    }} });
    firebug report the error as grid.loadMask.show is not a function. And when i remove the listener, mask does not come up the first time as well when the grid is loading.

    Please help.

    Thanks & Regards.


  8. #8
    Ext User uniring's Avatar
    Join Date
    Mar 2009
    Posts
    36
    Vote Rating
    0
    uniring is on a distinguished road

      0  

    Default


    Obviously, before the change yo were having a loadMask object in your grid.loadMask variable, now that you passed to it a loadMask config the object is created internally and the grid.loadMask variable only contains the config, not the element.

    In my post i said that it will work automatically and you doesn't need to show / hide it manually, i mean that you need to delete all lines where you're working with the grid.loadMask as a mask object.

    Try to let the grid manage the correct loadMask that you have now.
    Project manager / coder @ xDesk ERP

  9. #9
    Sencha User
    Join Date
    Aug 2009
    Posts
    20
    Vote Rating
    0
    gabrieaj is on a distinguished road

      0  

    Default


    Thanks for the reply.

    I did try that without the listener. However loadmask fails to show up. Is there any more config options which will help to show the loadmask??

    Thanks & Regards.

  10. #10
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    In GP, the loadMask is built in the onRender phase. Try the afterrender event instead.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.