1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    29
    Vote Rating
    0
    v2108 is on a distinguished road

      0  

    Default 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


    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

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

  3. #2
    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

      0  

    Default


    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>
    Last edited by friend; 18 Jul 2012 at 9:46 AM. Reason: formatting.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Posts
    29
    Vote Rating
    0
    v2108 is on a distinguished road

      0  

    Default


    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?

Thread Participants: 1

Tags for this Thread

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