View Full Version : Grid inside Tab

16 Oct 2006, 6:48 AM
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:

initUserTabs : function(){
var tabs = new YAHOO.ext.TabPanel('user_tabs');
tabs.addTab('user', "User");
tabs.addTab('profile', "Profile");
tabs.addTab('roles', "Roles");
}, // End User Specific Tabs


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',
this.tabRoleGridData = new YAHOO.ext.grid.XMLDataModel(schema);

this.userTabRoleGrid = new YAHOO.ext.grid.Grid('tabbed_role_grid', this.tabRoleGridData, colModel);


}, // End Role Grid inside Tabs

heres my markup:

<div>MASSIVE FORM</div>

seems to be stripping my html....

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

16 Oct 2006, 8:09 AM
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):

YAHOO.ext.grid.GridView.prototype.updateWrapHeight = function(){
var box = this.grid.container.getBox(true);
this.wrapEl.setHeight(box.height-this.footerHeight-parseInt(this.wrap.offsetTop, 10));

No more errors when display none!

12 Nov 2006, 11:49 PM
- 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?


13 Nov 2006, 5:24 AM
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".

13 Mar 2008, 10:27 AM

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.~o)