create a new tab by click a row of gridPanel

[afei]

how to create a new tab by click a row of gridPanel?
all should kown the extjs api ,when you click a link ,the content will show in a new tabpanel,but now i want that when i click a row of gridpanel, then content will show in a new tabpenl too.

below is my code

var Tree = Ext.tree;
var root = new Tree.AsyncTreeNode({
 text : paraMenuName,
 draggable : false,
 id : 'root',
 loader : new Tree.TreeLoader({
  dataUrl : menuUrl
 })
});
var tree = new Ext.tree.TreePanel({
 contentEl : 'west',
 border : true,
 root : root,
 region : 'west',
 id : 'west-panel',
 split : true,
 width : 160,
 minSize : 150,
 maxSize :200,
 margins : '0 0 0 0',
 layout : 'accordion',
 title : paraMenuName,
 collapsible : true,
 layoutConfig : {
  animate : true
 },
 rootVisible : true,
 autoScroll : true
});
tree.on('click',treeClick);
//tree.expandAll();
var tab = new Ext.TabPanel({
 region:'center',
 
 deferredRender:false,
 activeTab:0,
 items:[{
  contentEl : 'contenPanel',
  title: menuName,
  autoScroll:true,
   id : resid,
    html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="grid.jsp"></iframe>'
/*  autoLoad:{
   url:FirstmenuURL,
   script:true
  }*/
 }]
});
function treeClick(node,e) {
  if(node.isLeaf()){
  e.stopEvent();
  var n = tab.getComponent(node.id);
  if (!n && node.id != resid) {
   var n = tab.add(new Ext.Panel({
    id : node.id,
    title : node.text,
    closable:true,
    autoScroll : true,
    html : "<div style='height:100%;height:100%'>"
      + "<iframe src='" + node.attributes.href + "' "
      + "width='100%' height='100%' frameborder=0/>"
      + "</div>"
    }));
  }
  tab.setActiveTab(n);
  }
}
Ext.onReady(function() {
 var viewport = new Ext.Viewport({
  layout : 'border',
  items : [new Ext.BoxComponent({
   region : 'north',
   el : 'north',
   margins : '0 0 3px 0',
   height : 77
  }), tree, tab]
 });
 tree.render();
 root.expand();
 root.expandChildNodes();
 loadend();
});

[aconran]

To add an additional tab to a TabPanel is as simple as creating a Panel, GridPanel, FormPanel, DataView, etc and then adding it to the existing tabpanel. If you take a look at your existing code in your treeClick method you will see you are already doing this:

   var n = tab.add(new Ext.Panel({
    id : node.id,
    title : node.text,
    closable:true,
    autoScroll : true,
    html : "<div style='height:100%;height:100%'>"
      + "<iframe src='" + node.attributes.href + "' "
      + "width='100%' height='100%' frameborder=0/>"
      + "</div>"
    }));
  }
  tab.setActiveTab(n);

You have also tied an event handler to the treeClick method with the following line:

tree.on('click', treeClick);

Ext.grid.GridPanel exposes a similar event called rowclick. rowclick fires with 3 arguments the grid itself, the rowIdx and an event object. Given this information you will be able to create a new panel and add it to the TabPanel.

for example:

myGrid.on('rowclick', function(grid, rowIdx, e) {
   var ds = grid.getStore();
   var r = ds.getAt(rowIdx);
   // use information from r (an Ext.data.Record) object
   // to instantiate a new Panel.
   //....
   // now add the panel to the Ext.TabPanel
   //...
   // now set the panel as the active tab
});

[afei]

thanks you reply,another problem is my gridpanel is in a frame

html : '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="grid.jsp"></iframe>'

and the grid.js is warpped in grid.jsp,and rowclick event is defined in grid.js
how can i get the tab Panel and add a new tabpanel to tab?

[aconran]

In general I would suggest that you architect your application to add the GridPanel directly to the TabPanel rather than add a Panel with an iframe.

However if you are going to continue working with iframes you should take a look at Doug Henderick's ManagedIFrame user extension.

[afei]

I kown that it is not a good idea to use iframe,but i need dynamic to load some page,not only for adding a gridpanel.beside,ManagedIFrame can come true what i want?