1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    Answers
    2
    mohaskuar is on a distinguished road

      0  

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

    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...

  2. @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>

  3. #2
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    -1
    MaximusDecimus is an unknown quantity at this point

      0  

    Default

    Use a tabPanel?

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    Answers
    2
    mohaskuar is on a distinguished road

      0  

    Default clear

    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]]  
                                      
            };

  5. #4
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    -1
    MaximusDecimus is an unknown quantity at this point

      0  

    Default

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

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    Answers
    2
    mohaskuar is on a distinguished road

      0  

    Default another view activated

    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

  7. #6
    Sencha User
    Join Date
    May 2012
    Posts
    14
    Vote Rating
    -1
    MaximusDecimus is an unknown quantity at this point

      0  

    Default

    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');

  8. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    Answers
    2
    mohaskuar is on a distinguished road

      0  

    Default yah the items are panels

    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
    Last edited by mohaskuar; 25 Jul 2012 at 3:50 AM. Reason: clarifiend

  9. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    58
    Vote Rating
    6
    Answers
    3
    WillBill is on a distinguished road

      0  

    Default

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

  10. #9
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      2  

    Default

    @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>

  11. #10
    Sencha User
    Join Date
    Jun 2012
    Posts
    81
    Vote Rating
    0
    Answers
    2
    mohaskuar is on a distinguished road

      0  

    Default @ freind

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