How to add conent into a tab and use different components in one app

**v2108** · 18 Jul 2012 8:32 AM

Hi,
I'm totally new to extjs and I must develop a layout with a tab panel and a tree in a tab. I have already made the tab panel, but how can I include a tree into an item of a tab panel?

Another problem for me is to use different components, like a tree and a formulare on one page. Can I write two Ext.Create() commands behind one another? Or is there another procedure?

I would be very pleased, if you could help me, because I need it very soon.

Nice Greets, Victoria

friend

Here's some sample code which uses a Viewport/border layout to manage a Tab Panel and Tree Panel (used as a menu system).

This sample uses Ext.create() as well as 'xtype' construction and everything is done in-line.

A better approach would be to use the ExtJS MVC architecture; regardless, this gives you some functional code to learn by...

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,
              leaf: false, 
              children: [{
                text: 'Locations',
                leaf: true
              },{
                text: 'Users',
                leaf: true
              }]
            },{ 
              text: "Utilities", 
              expanded: true, 
              children: [{ 
                text: "Reports", 
                leaf: true 
              },{ 
                text: "System Maintenance", 
                leaf: true
              }]
            }]
          }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
          region: 'west',
          title: 'Menu',
          width: 200,
          height: 150,
          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,
              title: 'Tab 1',
              html: 'Some content here.'
            },{
              xtype: 'panel',
              bodyPadding: 5,
              title: 'Tab 2',
              html: 'More banal, boring textual 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'
              //width: 180
            },{
              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>

**friend** · 18 Jul 2012 9:42 AM

Here's some sample code which uses a Viewport/border layout to manage a Tab Panel and Tree Panel (used as a menu system).

This sample uses Ext.create() as well as 'xtype' construction and everything is done in-line.

A better approach would be to use the ExtJS MVC architecture; regardless, this gives you some functional code to learn by...

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,
              leaf: false, 
              children: [{
                text: 'Locations',
                leaf: true
              },{
                text: 'Users',
                leaf: true
              }]
            },{ 
              text: "Utilities", 
              expanded: true, 
              children: [{ 
                text: "Reports", 
                leaf: true 
              },{ 
                text: "System Maintenance", 
                leaf: true
              }]
            }]
          }
        });

        var treePanel = Ext.create('Ext.tree.Panel', {
          region: 'west',
          title: 'Menu',
          width: 200,
          height: 150,
          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,
              title: 'Tab 1',
              html: 'Some content here.'
            },{
              xtype: 'panel',
              bodyPadding: 5,
              title: 'Tab 2',
              html: 'More banal, boring textual 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'
              //width: 180
            },{
              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>

**v2108** · 18 Jul 2012 9:52 PM

That's nice, but I wanted to know how I get the tree into the content of one tab. For example the tree should just be shown in tab two and not in tab one. Is this also possible?

How to add conent into a tab and use different components in one app

Thread Tools

Search Thread

Display

Answered: How to add conent into a tab and use different components in one app

Answered: How to add conent into a tab and use different components in one app

Tags for this Thread