1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    77
    Answers
    2
    Vote Rating
    0
    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..

    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
    77
    Answers
    2
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default clear

    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
    77
    Answers
    2
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default another view activated

    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
    77
    Answers
    2
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default yah the items are panels

    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
    Answers
    3
    Vote Rating
    6
    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
    Answers
    106
    Vote Rating
    27
    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
    77
    Answers
    2
    Vote Rating
    0
    mohaskuar is on a distinguished road

      0  

    Default @ freind

    @ freind


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