1. #11
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    bhupatikrish is on a distinguished road

      0  

    Default

    Hi Hendricd,
    I am having the same problem. My load mask is not centered. I have the following code.

    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });

    Can you please let me know where to put the code you suggested?

  2. #12
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    Quote Originally Posted by bhupatikrish View Post
    Hi Hendricd,
    I am having the same problem. My load mask is not centered. I have the following code.

    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });

    Can you please let me know where to put the code you suggested?
    Try putting this just before your load statement:

    grid.loadMask.show();
    grid.load.defer(50,grid,[ anyArguments ]);
    "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.


  3. #13
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    bhupatikrish is on a distinguished road

      0  

    Default

    Hi Hendricd,
    It's giving an error "grid.loadMask.show is not a function".


    Quote Originally Posted by hendricd View Post
    Try putting this just before your load statement:

    grid.loadMask.show();
    grid.load.defer(50,grid,[ anyArguments ]);

  4. #14
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Question

    Quote Originally Posted by bhupatikrish View Post
    Hi Hendricd,
    It's giving an error "grid.loadMask.show is not a function".
    @bhupatikrish -- Can you post your latest gridPanel definition for a look-see.
    "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.


  5. #15
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    bhupatikrish is on a distinguished road

      0  

    Default

    Hi Hendricd,
    Thank you for your reply. My gridPanel code is
    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });
    grid.loadMask.show();
    grid.load.defer(50,grid);

    Quote Originally Posted by hendricd View Post
    @bhupatikrish -- Can you post your latest gridPanel definition for a look-see.

  6. #16
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    @bhupatikrish -- It looks like you haven't rendered it yet, so there is not a loadMask initialized.
    Code:
    var grid = new Ext.grid.GridPanel({
                title: config.title,
        ds: ds,
        cm: cm,
        tbar: toolbar,
        plugins: layout.getPlugins(),
        loadMask: true,             // loading screen
        trackMouseOver: true,         // highlight row on mouseover
        view: new Ext.grid.GroupingView({
             forceFit: true,            //maximize column width
             hideGroupedColumn: true,
             enableNoGroups: false,    // can't ungroup
             groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
                 }),
         listeners : {
              render(grid){
                 grid.loadMask.show();
                 grid.load.defer(50,grid);
              }
         }       
           });
       grid.render(Ext.getBody); //only if not an item of another Container.
    "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.


  7. #17
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    bhupatikrish is on a distinguished road

      0  

    Default

    Hi Hendricd,
    Thank you for your support. I tried the way you suggested but its giving and error "grid.loadMask.show() is not a function". The code I tried is
    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: true, // loading screen
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    }),
    listeners : {
    render: function(){
    grid.loadMask.show();
    grid.load.defer(50,grid);
    }
    }
    });

    But I resolved my problem by creating a new loadMask. Though it masks the entire screen it works for my situation. I appreciate for your support.
    My current working grid look as

    var grid = new Ext.grid.GridPanel({
    title: config.title,
    ds: ds,
    cm: cm,
    tbar: toolbar,
    plugins: layout.getPlugins(),
    loadMask: new Ext.LoadMask(Ext.getBody(), {msg:"Loading..."}),
    trackMouseOver: true, // highlight row on mouseover
    view: new Ext.grid.GroupingView({
    forceFit: true, //maximize column width
    hideGroupedColumn: true,
    enableNoGroups: false, // can't ungroup
    groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
    })
    });

    Thanks and Regards,
    Krishna.

    Quote Originally Posted by hendricd View Post
    @bhupatikrish -- It looks like you haven't rendered it yet, so there is not a loadMask initialized.
    Code:
    var grid = new Ext.grid.GridPanel({
                title: config.title,
        ds: ds,
        cm: cm,
        tbar: toolbar,
        plugins: layout.getPlugins(),
        loadMask: true,             // loading screen
        trackMouseOver: true,         // highlight row on mouseover
        view: new Ext.grid.GroupingView({
             forceFit: true,            //maximize column width
             hideGroupedColumn: true,
             enableNoGroups: false,    // can't ungroup
             groupTextTpl: '{[ values.rs[0].data["groupName"] ]}'
                 }),
         listeners : {
              render(grid){
                 grid.loadMask.show();
                 grid.load.defer(50,grid);
              }
         }       
           });
       grid.render(Ext.getBody); //only if not an item of another Container.

  8. #18
    Sencha - Services Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,965
    Vote Rating
    12
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default

    @bhupatikrish -- I don't think your listener was formatted properly:

    Code:
     listeners : {
              render: function(grid){
                 grid.loadMask.show();
                 grid.load.defer(50,grid);
              }
         }
    "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.


  9. #19
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    46
    Vote Rating
    0
    tfulmino is on a distinguished road

      0  

    Default

    Hendricd... please help!!!

    I too am having the "loadMask" issue. Below is the code I am using to init a new GridPanel. I have tried to put the loadMask.show() function in the render event, but I have had no luck.

    Any advice would be GREATLY appreciated.

    Thanks!


    Code:
    Comperio.Controls.SearchResultGrid = function(config) {
        Ext.apply(this, {
            width:700,
            height:500,
            title:'ExtJS.com - Browse Forums',
            trackMouseOver:false,
            disableSelection:true,
            loadMask: true,
    
            // grid columns
            columns:[{
                id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
                header: "Topic",
                dataIndex: 'title',
                width: 420,
                sortable: true
            }],
            
            store: new Ext.data.JsonStore({
                root: 'topics',
                totalProperty: 'totalCount',
                idProperty: 'threadid',
                remoteSort: true,
    
                fields: [
                    'title', 'forumtitle', 'forumid', 'author',
                    {name: 'replycount', type: 'int'},
                    {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
                    'lastposter', 'excerpt'
                ],
    
                // load using script tags for cross domain, if the data in on the same domain as
                // this page, an HttpProxy would be better
                proxy: new Ext.data.ScriptTagProxy({
                    url: 'http://extjs.com/forum/topics-browse-remote.php'
                })
            }),
            listeners: 
            {
              render: function(grid)
              {
                    grid.loadMask.show();
                    grid.store.load();
              }
            },
    
    
            // customize view config
            viewConfig: {
                forceFit:true,
                enableRowBody:true,
                showPreview:true
            }
        });
        Comperio.Controls.SearchResultGrid.superclass.constructor.apply(this, arguments);
    };
    
    Ext.extend(Comperio.Controls.SearchResultGrid, Ext.grid.GridPanel, {});
    
    Ext.reg('csearchresultgrid', Comperio.Controls.SearchResultGrid);

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

      0  

    Default

    @tfulmino -- It's not clear what layout your GridPanel is living in, but try using a different event to kick things off (when the GridView finally gets its initial sizing):

    Code:
     listeners: 
            {
              afterlayout: function(grid)
              {
                    if(grid.loadMask){
                        grid.loadMask.show();
                    }
                    grid.store.load.defer(100);
              }
            },
    "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.