Results 1 to 4 of 4

Thread: How to show content in layout after click tree node

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    3

    Default Answered: How to show content in layout after click tree node

    Hello everybody,
    i am stuck here.

    i have a tree like this

    MyTree.js
    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'application/controllers/itemlist.php',
            node: 'id'
        },
        root: {
            text: 'Root Node',
            id: 'root_node',
            expanded: true
        }
    });
    
    
    var treePanel = Ext.create('Ext.tree.Panel', {
        id: 'tree-panel',
        region:'north',
        autoHeight: true, 
        minSize: 150,
        rootVisible: false,
        border: false,
        flex: 3,
        store: store
    });
    
    
    var detail = Ext.create('Ext.panel.Panel', {
        title: 'Details',
        region: 'south',
        height: 240,
        border: false,
        bodyStyle: 'padding: 5px;',
        autoScroll: true,
        flex: 1,
        html: '<p style="margin: 5px;">When you select a layout from the tree, additional details will display here.</p>'
    });    
    
    
    Ext.define('AM.view.layout.MyTree', {
        extend: 'Ext.container.Container',
        alias: 'widget.mytreepanel',
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [ treePanel, detail ]
    });
    the tree is in region 'west', so when i click the node tree, i want to display tab panel in the center.

    for code in the tab panel is

    MyContent.js
    Code:
    Ext.define('AM.view.layout.MyContent', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.contentpanel',
        
        activeItem: 0, 
        layout: {
            type: 'card',
            deferredRender: true
        },
        border: false,
        region: 'center'
    });
    how do i make it happen?

  2. I see you are using the region config but then using vbox layout. The region config will only work for border layout. You can add/remove items to a center region of a border layout.

  3. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379
    Answers
    3997

    Default

    I see you are using the region config but then using vbox layout. The region config will only work for border layout. You can add/remove items to a center region of a border layout.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  4. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    3

    Default

    thank you a lot, Mitchell. finally fix this problem.

  5. #4

    Default help me

    can you help me to solve this?..

    i have same problem but i using viewport configuration like this.

    PHP Code:
    var store Ext.create('Ext.data.TreeStore', {
            
    root: {
                
    expandedtrue
            
    },
            
    proxy: {
                
    type'ajax',
                
    url'application/frontend/model/tree-data.json'
            
    }
        });
        
       
        var 
    treePanel Ext.create('Ext.tree.Panel', {
            
    id'tree-panel',
            
    title'Main Menu',
            
    region:'north',
            
    splittrue,
            
    height360,
            
    minSize150,
            
    rootVisiblefalse,
            
    autoScrolltrue,
            
    storestore,
            
    listeners: {
                
    itemclick: function(viewrecorditemindexevteOpts) {
                  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',
                      
    bodyPadding5,
                      
    html"",
                      
    itemIdmenuId,
                      
    titlenodeText,
                      
    closabletrue,
                      
    layout'border'
                    
    });
                    
                    
    tabPanel.add(childTab);
                    
                  }
                  
                  
    // set the tab active/visible.
                  
    tabPanel.setActiveTab(childTab);
                }
              },
        });
        
        
        var 
    tabpanels = {
            
    xtype'tabpanel',
            
    activeTab0// index or id
            
    items:[{
                
    title'Welcome',
                
    margins:'5 5 5 25',
                
    html'<h1>Welcome in Content Management System AIA-SATU</h1>',            
            }]
        };
        
        var 
    contentPanel = {
            
    id'content-panel',
            
    region'center'// this is what makes this panel into a region within the containing layout
            
    layout'card',
            
             
    margins'2 5 5 0',
             
    activeItem0,
             
    borderfalse,
             
    itemstabpanels
        
    };
        
        
    Ext.create('Ext.Viewport', {
            
    layout'border',
            
    title'Ext Layout Browser',
            
    items: [{
                
    xtype'box',
                
    id'header',
                
    region'north',
                
    html'<h1>Content Management System AIA-SATU</h1>',
                
    height30
            
    },{
                
    layout'border',
                
    id'layout-browser',
                
    region:'west',
                
    borderfalse,
                
    split:true,
                
    margins'2 0 5 5',
                
    width290,
                
    minSize100,
                
    maxSize500,
                
    items: [treePanel]
            }, 
                
    contentPanel
            
    ],
            
    renderToExt.getBody()
        }); 
    when i click tree menu, i cant show content in tab panel, which is in center region.

    Thanks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •