1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    50
    Vote Rating
    0
    afei is on a distinguished road

      0  

    Default create a new tab by click a row of gridPanel

    create a new tab by click a row of gridPanel


    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

    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();
    });

  2. #2
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,306
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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:

    Code:
       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:
    Code:
    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:
    Code:
    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
    });
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    50
    Vote Rating
    0
    afei is on a distinguished road

      0  

    Default


    thanks you reply,another problem is my gridpanel is in a frame
    Code:
    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?

  4. #4
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,306
    Vote Rating
    125
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    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.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    50
    Vote Rating
    0
    afei is on a distinguished road

      0  

    Default


    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?

Thread Participants: 1