1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    60
    Vote Rating
    0
    irishdunn is on a distinguished road

      0  

    Default Grid inside Tab

    Grid inside Tab


    It seems to be so strait foward, but I keep getting an error when the dom.js is in the setStyle function. it seems to be trying to pass the style "height" with a value of "-2px" little goofy, dont know where I might have messed anything up, here is my code for the grid and tab:

    Code:
     //                                  USER TABS                                        //
    //-----------------------------------------------------------------------------------//          
            initUserTabs : function(){
                var tabs = new YAHOO.ext.TabPanel('user_tabs');
                tabs.addTab('user', "User");
                tabs.addTab('profile', "Profile");
                tabs.addTab('roles', "Roles");
                tabs.activate('user');
            }, // End User Specific Tabs
            
     //                                TAB ROLE GRID                                      //
    //-----------------------------------------------------------------------------------//          
    
            initUserTabRoleGrid : function(){
                var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
                var yg = YAHOO.ext.grid;
                // Formatters come first so they can be called in the colmodel
                var boolFormat = function(value){
                    if(value == 'true')
                        return '<input>';
                    if(value == 'false')
                        return '<input>';
                    if(value == '')
                        return '';
                };
                    
                var dateFormat = function(value){
                    return value.dateFormat('M d, Y');  
                };
    
                var parseDate = function(value){
                    return new Date(Date.parse(value));
                };
    
                // Creation of the components of the grid follows
                var colModel = new YAHOO.ext.grid.DefaultColumnModel([ 
                   {header: "Editable Roles", width: 330, sortable: true, sortType: sort.asUCString},
                   {header: "True/False", width: 330, sortable: true, sortType: sort.asUCString, editor: new yg.CheckboxEditor()}
                ]);
                
                var schema = {
                    tagName: 'role',
                    id: 'use-index',
                    fields: ['roleName',
                             'hasRole']
                };
                this.tabRoleGridData = new YAHOO.ext.grid.XMLDataModel(schema);
                
                this.userTabRoleGrid = new YAHOO.ext.grid.Grid('tabbed_role_grid', this.tabRoleGridData, colModel);
                this.userTabRoleGrid.render();
                
                
                this.tabRoleGridData.load('../Scripts/yui/authentication/demoRoles.xml');
                            
            }, // End Role Grid inside Tabs
    heres my markup:
    Code:
    <div>MASSIVE FORM</div>
    <div><div></div></div>
    <div><div></div></div>
    <div></div>
    seems to be stripping my html....

    pretty strait foward, wonder where that val is coming from...

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Remember the grid has to be in a container element that has a defined size and doesn't have a display of none. Tabs that are not visible are display:none, which makes them a pain to work with.

    The best solution is to render the grid into the element before it is display:none (before you create the tab strip).

    An alternate solution is available with the .0.32.3 version and my local dev copy is using it. Here's a patch that lets it work without a problem in a display:none element (like a tab):

    Code:
    YAHOO.ext.grid.GridView.prototype.updateWrapHeight = function(){
            this.grid.container.beginMeasure();
            var box = this.grid.container.getBox(true);
            this.wrapEl.setHeight(box.height-this.footerHeight-parseInt(this.wrap.offsetTop, 10));
            this.grid.container.endMeasure();
        }
    No more errors when display none!

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    3
    Vote Rating
    0
    hammond is on a distinguished road

      0  

    Default


    - I am using .33rc1 and trying to put a grid under each of 3 tabs. The first one shows that is on the page when it loads but switching to a different tab does not render the next grid.

    It looks like .33rc1 will address that... but I am still having a problem.

    What do I need to do to force the grid to render on tab change or on page load? Do we still have to add the patch?

    Thanks

  4. #4
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Do you have your column css defined? If not (or if you have no idea what I am talking about) try a search for "multiple grids".

  5. #5
    Ext User jaydipdave's Avatar
    Join Date
    Mar 2008
    Posts
    6
    Vote Rating
    0
    jaydipdave is on a distinguished road

      0  

    Question Ext JS Tab Does not work in hidden div (in Tab)

    Ext JS Tab Does not work in hidden div (in Tab)


    Hello,

    I am facing the same problem in hidden div, you have given the solution for yahoo.ext.grid.

    But I am using Ext.grid. Is there any way to make it working in hidden div (i.e. tabs)

    Waiting for response.

    Jaydeep.

Similar Threads

  1. Best practice for Grid inside TabPanel
    By corey.gilmore in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 2 Feb 2010, 9:46 AM
  2. Grid with images inside
    By ajx in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 15 Dec 2006, 12:11 PM
  3. Grid inside GridPanel not being layed out.
    By Animal in forum Ext 1.x: Help & Discussion
    Replies: 3
    Last Post: 15 Nov 2006, 9:39 AM
  4. issue with grid inside tab inside dialog
    By bernieberg in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 9 Oct 2006, 6:05 AM

Thread Participants: 3