PDA

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



gkassyou
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?

ismoore
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: {
split:false,
initialSize:65,
autoScroll:true,titlebar:true
},
south: {
split:true,

initialSize: 200,
minSize: 100,
autoScroll:true,
collapsible:true,
titlebar: true
},
center: {
maxSize: 400,
minSize:400,
tabPostion:'top',
titlebar: false,
autoScroll:true
}
});

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!



innerLayout.beginUpdate();
.... //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
document.body.appendChild(newDiv)
grid = new YAHOO.ext.grid.Grid(id, dataModel, colModel, selectionModel);
grid.trackMouseOver = true
grid.render()
...
//now add it to your layout
var vp = innerLayout.add('center', new YAHOO.ext.GridPanel(grid,
{title: thisNode.getAttribute("name")}));

... // end for each
innerLayout.endUpdate()


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!

Ian

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