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,188
    Vote Rating
    119
    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,188
    Vote Rating
    119
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi