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

      0  

    Default


    Hendricd:

    Thanks for the quick reply. The GridPanel is being loaded into a TabPanel. When the user submits a "search" we are creating an instance of the GridPanel and loading it into the TabPanel.

    The code below is similar to what we are doing.

    Code:
    var viewer = Ext.getCmp('contentViewer');
    if (viewer) {
         viewer.add(
             new Comperio.Controls.SearchResultGrid()
         ).show();
    }
    I tried the "afterlayout" event - no go.

    Any other suggestions?

    Thanks again!

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

      0  

    Default


    Quote Originally Posted by tfulmino View Post
    ... The code below is similar to what we are doing.
    If the tabPanel is already rendered, you must call doLayout on it:
    Code:
    var viewer = Ext.getCmp('contentViewer');
    if (viewer) {
         var GP = viewer.add( new Comperio.Controls.SearchResultGrid() );
         viewer.doLayout();
         viewer.setActiveTab(GP);
    }
    But, if your tabPanel is set for autoHeight, there may not be any height to mask anything until something is loaded into the grid (chicken vs egg).

    What is the parent container of the TabPanel?
    "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. #23
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    46
    Vote Rating
    0
    tfulmino is on a distinguished road

      0  

    Default


    Interesting....

    The TabPanel is within a Viewport as the "center" container.

    Does this make a difference?

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

      0  

    Default


    That is a good thing -- meaning the tabPanel always has a specific height/width.
    Do not use autoHeight in that layout.

    Did you add the defer syntax to the grid.load statement (try using the render event again with that) and fix your tabPanel.add ?
    "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. #25
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    46
    Vote Rating
    0
    tfulmino is on a distinguished road

      0  

    Default


    hendricd - first off THANK YOU for the assistance you are providing.

    I have readjusted my code as you suggested. I am still receiving a JS error on the "show" function of the loadMask.

    This is what I currently have:

    Code:
    render: function(grid)
     {   
         if(grid.loadMask){
             grid.loadMask.show();
         }
         grid.store.load.defer(100);
    }
    The following is what is happening with the new code....

    1. user clicks search
    2. tab menu is created on the viewer; however, not set to active
    3. render event is called on the GridPanel
    4. the statement (grid.loadMask) is true
    5. error on the statement (grid.loadMask.show() - is not a function.)

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

      0  

    Default


    What version of Ext is this? the show method was introduced in 2.0+
    "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. #27
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    46
    Vote Rating
    0
    tfulmino is on a distinguished road

      0  

    Default


    We are using version 2.2.

    If I put a watch on grid.loadMask it does not equal an object, but rather the value "true".

    Problem?

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

      0  

    Default


    Quote Originally Posted by tfulmino View Post
    Problem?
    Uh, yes. If you must define your grid, try defining it this way.
    Code:
    Comperio.Controls.SearchResultGrid = 
       Ext.extend( Ext.grid.GridPanel, {
    
            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)
              {
      
                   if(grid.loadMask){
                         grid.loadMask.show();
                  }
                  grid.store.load.defer(100);
              }
            },
    
    
            // customize view config
            viewConfig: {
                forceFit:true,
                enableRowBody:true,
                showPreview:true
            }
        });
    
    Ext.reg('csearchresultgrid', Comperio.Controls.SearchResultGrid);
    Altho it's a bit of a waste since its a single-use class anyway.
    "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. #29
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    46
    Vote Rating
    0
    tfulmino is on a distinguished road

      0  

    Default


    Doug:

    Thanks again for the quick response!

    Taking your exact code and replacing mine produces the same result:

    Error: grid.loadMask.show is not a function
    Source File: http://localhost:12403/Library/Compe...hresultgrid.js
    Line: 44

    Can what I am doing even be accomplished?

  10. #30
    Ext User
    Join Date
    Oct 2008
    Posts
    18
    Vote Rating
    0
    cpt_sisqo is on a distinguished road

      0  

    Default


    I'm too having the same error:

    Code:
    Error: grid.loadMask.show is not a function
    Any solutions?