how to make a center region open its items on new tab with out closing the other..

**mohaskuar** · 25 Jul 2012 1:21 AM

hi,i wanted to do some thing like ext docs. when u click one example from west it opens with new tab in the center region...

friend

@mohaskuar

Here's functional example of a TabPanel with Tree Menu. Note that it doesn't use MVC and I coded everything in-line, just so it's easier to follow. Regardless, I highly recommend learning/using the ExtJS MVC design methodology.

Also, this example also doesn't take into account closing/hiding of tabs; I leave that up to you as a learning experience.

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <title>BadMonkey.com - Demo App</title>
    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
      
    <script type="text/javascript">
      Ext.onReady(function() {
        
        var treeStore = Ext.create('Ext.data.TreeStore', {
          root: {
            expanded: true,
            children: [{
              text: "Admin",
              expanded: true,
              id: 'admin', 
              children: [{
                text: 'Locations',
                leaf: true,
                id: 'admin_locations'
              },{
                text: 'Users',
                leaf: true,
                id: 'admin_users'
              }]
            },{ 
              text: "Utilities", 
              expanded: true, 
              id: 'Utilities',
              children: [{ 
                text: "Reports", 
                leaf: true ,
                id: 'util_reports'
              },{ 
                text: "System Maintenance", 
                leaf: true,
                id: 'util_maintenance'
              }]
            }]
          }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
          region: 'west',
          title: 'Menu',
          width: 200,
          height: 150,
          listeners: {
            itemclick: function(view, record, item, index, evt, eOpts) {
              var menuId = record.get('id');
              var nodeText = record.get('text');

              // if it's a branch, display node text.
              if (!record.get('leaf')) {
                Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
                return;
              }        
              
              var tabPanel = this.up('viewport').down('tabpanel'); 
              
              // see if the target tab already exists.
              var childTab = tabPanel.child('#' + menuId);
              
              // if not, create it.
              if (childTab == null) {
                childTab = Ext.create('Ext.panel.Panel', {
                  xtype: 'panel',
                  bodyPadding: 5,
                  html: 'This is the ' + nodeText + ' Tab content',
                  itemId: menuId,
                  title: nodeText
                });
                
                tabPanel.add(childTab);
              }
              
              // set the tab active/visible.
              tabPanel.setActiveTab(childTab);
            }
          },
          store: treeStore,
          rootVisible: false
        });
        
        
        Ext.create('Ext.container.Viewport', {
          layout: 'border',  
          items: [{
            xtype: 'panel',
            region: 'north',
            collapsible: true,
            frame: true,
            height: 65,
            html: '<span style="font-size: 24px;">Application Name Here</span>',
            title: 'BadMonkey.com'
          },
            treePanel
          ,{
            xtype: 'tabpanel',
            region: 'center',
            items: [{
              xtype: 'panel',
              bodyPadding: 5,
              itemId: 'home',
              title: 'Home',
              html: 'Home Page Content Here'
            }]
          },{
            xtype: 'panel',
            region: 'south',
            frame: true,
            height: 32,
            layout: {
              type: 'hbox',
              align: 'stretch',
              pack: 'start'
            },
            items: [{
              xtype: 'container',
              html: '&copy; 2012, BadMonkey.com'
            },{
              xtype: 'container',
              flex: 1,
              html: '<a href="mailto:help@badmonkey.com?Subject=Bad monkey, needs spanking...">Email Support</a>',
              style: {
                textAlign: 'right'
              }
            }]
          }]  
        });   
      });
    </script>

  </head>
  
  <body>
  </body>
</html>

**MaximusDecimus** · 25 Jul 2012 2:13 AM

Use a tabPanel?

**mohaskuar** · 25 Jul 2012 3:30 AM

please make it clear as posible

listener code

Code:

function clicklistner(view, record, item, index, event) {
                                   
                      nodeId = record.data.id;
                      var p1=Ext.getCmp('content-panel').getLayout();
                      p1.setActiveItem(nodeId);
            
                                }

center region

Code:

var contentPanel = {    
         id: 'content-panel',
         region: 'center', 
         layout: 'card',
         margins: '2 5 5 0',
         activeItem: 0,
         items:[policy[0],ds[0],ds[1],sys[0]]  
                                  
        };

**MaximusDecimus** · 25 Jul 2012 3:32 AM

You want a new tab or do you want an other view activated in your cardlayout?

**mohaskuar** · 25 Jul 2012 3:36 AM

i want another view activated with out closing the first one when listener is activated means a tree child is clicked..just like addind a new tab in firefox

**MaximusDecimus** · 25 Jul 2012 3:42 AM

If you want tabs, you need a tabPanel. If you dont need tabs:
The way i do it, is by adding the views to the cardLayout. My views are all Ext.panel.Panel.
you can then activate them by using the id of the given Panel.

Code:

var contentPanel = {             id: 'content-panel',
         region: 'center', 
         layout: 'card',
         margins: '2 5 5 0',
         activeItem: 0,
         items:[policy[0],ds[0],ds[1],sys[0]]  
                                  
        };

I have no idea what those items are, but if they where panels:

Code:

var panel;
contentPanel.add(panel);

Function of listener:

Code:

contentPanel.getLayout().setActiveItem('id-of-panel');

**mohaskuar** · 25 Jul 2012 3:49 AM

this will replace the center region with the new pane...i dont want to replace them ..just to add then in center region...for example i want to have all of my items...opened...as tabs

**WillBill** · 25 Jul 2012 4:02 AM

I think he does want a tabPanel, seeing has he is refering to sencha docs and firefox tabs.
Go to http://docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel, take a look at the example.

You can add tabs to a tabpanel by using:
Ext.getCmp('yourTabPanel').add(Ext.create('Ext.panel.Panel', { title: 'tab', html: 'content' }));

**friend** · 25 Jul 2012 4:37 AM

@mohaskuar

Here's functional example of a TabPanel with Tree Menu. Note that it doesn't use MVC and I coded everything in-line, just so it's easier to follow. Regardless, I highly recommend learning/using the ExtJS MVC design methodology.

Also, this example also doesn't take into account closing/hiding of tabs; I leave that up to you as a learning experience.

Code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <title>BadMonkey.com - Demo App</title>
    <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
      
    <script type="text/javascript">
      Ext.onReady(function() {
        
        var treeStore = Ext.create('Ext.data.TreeStore', {
          root: {
            expanded: true,
            children: [{
              text: "Admin",
              expanded: true,
              id: 'admin', 
              children: [{
                text: 'Locations',
                leaf: true,
                id: 'admin_locations'
              },{
                text: 'Users',
                leaf: true,
                id: 'admin_users'
              }]
            },{ 
              text: "Utilities", 
              expanded: true, 
              id: 'Utilities',
              children: [{ 
                text: "Reports", 
                leaf: true ,
                id: 'util_reports'
              },{ 
                text: "System Maintenance", 
                leaf: true,
                id: 'util_maintenance'
              }]
            }]
          }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
          region: 'west',
          title: 'Menu',
          width: 200,
          height: 150,
          listeners: {
            itemclick: function(view, record, item, index, evt, eOpts) {
              var menuId = record.get('id');
              var nodeText = record.get('text');

              // if it's a branch, display node text.
              if (!record.get('leaf')) {
                Ext.Msg.alert('Branch clicked', 'You clicked on tree branch: ' + nodeText);
                return;
              }        
              
              var tabPanel = this.up('viewport').down('tabpanel'); 
              
              // see if the target tab already exists.
              var childTab = tabPanel.child('#' + menuId);
              
              // if not, create it.
              if (childTab == null) {
                childTab = Ext.create('Ext.panel.Panel', {
                  xtype: 'panel',
                  bodyPadding: 5,
                  html: 'This is the ' + nodeText + ' Tab content',
                  itemId: menuId,
                  title: nodeText
                });
                
                tabPanel.add(childTab);
              }
              
              // set the tab active/visible.
              tabPanel.setActiveTab(childTab);
            }
          },
          store: treeStore,
          rootVisible: false
        });
        
        
        Ext.create('Ext.container.Viewport', {
          layout: 'border',  
          items: [{
            xtype: 'panel',
            region: 'north',
            collapsible: true,
            frame: true,
            height: 65,
            html: '<span style="font-size: 24px;">Application Name Here</span>',
            title: 'BadMonkey.com'
          },
            treePanel
          ,{
            xtype: 'tabpanel',
            region: 'center',
            items: [{
              xtype: 'panel',
              bodyPadding: 5,
              itemId: 'home',
              title: 'Home',
              html: 'Home Page Content Here'
            }]
          },{
            xtype: 'panel',
            region: 'south',
            frame: true,
            height: 32,
            layout: {
              type: 'hbox',
              align: 'stretch',
              pack: 'start'
            },
            items: [{
              xtype: 'container',
              html: '&copy; 2012, BadMonkey.com'
            },{
              xtype: 'container',
              flex: 1,
              html: '<a href="mailto:help@badmonkey.com?Subject=Bad monkey, needs spanking...">Email Support</a>',
              style: {
                textAlign: 'right'
              }
            }]
          }]  
        });   
      });
    </script>

  </head>
  
  <body>
  </body>
</html>

**mohaskuar** · 25 Jul 2012 4:55 AM

have some body told you that you are a life saver.......10ks verryyyyy much...thats exactly what i wanted

how to make a center region open its items on new tab with out closing the other..

Thread Tools

Search Thread

Display

Answered: how to make a center region open its items on new tab with out closing the other..

Answered: how to make a center region open its items on new tab with out closing the other..

clear

clear

another view activated

another view activated

yah the items are panels

yah the items are panels

@ freind

@ freind

Tags for this Thread