View Full Version : How to auto create a new grid results in a new tab

25 Apr 2007, 4:16 AM
I'm trying to dynamically add a new tab with a search results in a grid. There needs to be 1..n tabs with each having a grid of search results.

Is there a way to do that?

25 Apr 2007, 6:00 AM
yes there is if you are using a layout manager and gridView. Just add another GridView to the region and that will add a new tab with the grid contents.
Here is a snippet of code from something I am doing already. The only trick (and I am sure that someone will tell me there are better ways) is to dynamically create a div to contain the new grid.
When you destroy your search results panel, this will get destroyed as well...
I have some xml with a unique list of names and getting the name attribute gives the unique name of the tab

innerLayout def (for reference)

// innerLayout def (for reference)
innerLayout = new YAHOO.ext.BorderLayout('content', {
north: {
south: {

initialSize: 200,
minSize: 100,
titlebar: true
center: {
maxSize: 400,
titlebar: false,

code to add multiple grids. can be called at any time
each of my tabs are named so in the exampe, this gives the unique name for them:thisNode.getAttribute("name")
Basically the id variable should be set to an id that is unique to the DOM otherwise it will fail/overwrite something else!

.... //for each tab, set up data model etc
var dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
var colModel = new YAHOO.ext.grid.DefaultColumnModel(headers);
var selectionModel = new YAHOO.ext.grid.DefaultSelectionModel()
//now create the div
var id = "grid:"+thisNode.getAttribute("name") // name is my unique id
var newDiv = document.createElement("div")
newDiv.setAttribute("id", id)
// inner1 is the div that is associated with innerLayout above
grid = new YAHOO.ext.grid.Grid(id, dataModel, colModel, selectionModel);
grid.trackMouseOver = true
//now add it to your layout
var vp = innerLayout.add('center', new YAHOO.ext.GridPanel(grid,
{title: thisNode.getAttribute("name")}));

... // end for each

Hope the code is not too confusing. It may not work as is as I have copied/hacked it into an example but the theory behind it works.
I manually destroy the tabs which will get rid of the div too. If you need to generate a unique id, there is something in either YUI or YUI-EXT that does it somewhere!


28 Apr 2007, 7:52 AM
Thanks that worked.