1. #1
    Sencha User
    Join Date
    Jun 2013
    Posts
    12
    Vote Rating
    0
    QuantumScripting is on a distinguished road

      0  

    Default ExtJS 4.2 - Tab Panel - Tab containing grid panel not displaying

    ExtJS 4.2 - Tab Panel - Tab containing grid panel not displaying


    I am trying to setup a tab panel on my page, which contains 2 tabs with both containing grids. However, I cannot get my first grid panel to even display as a tab.

    Code:
    var tabHistoryPanel = Ext.create('Ext.tab.Panel',
    {   
      name: 'historyTabs', 
      id: 'historyTabs', 
      border: false, 
      flex: 1, 
      activeTab: 0,
     //  layout: 'fit',
     //  style: 'border-top: 1px solid #4c535c;', 
       items: [ 
            actionsGrid, 
           {            
               title: 'Test',
                border: false,
                html: 'Testing'        
            } 
       ], 
       dockedItems: 
       [ .............

    And here is the grid panel I am trying to add in. I can get the 'Test' tab to display, but not the actionsGrid. Am I missing something here?


    Code:
    var actionsGrid = Ext.create('Ext.grid.Panel', 
       { 
           title: 'Property',
           id: 'userActionsGrid', 
        //  style: 'border-top: 1px solid #4c535c;', 
           border: false, 
           flex: 1, 
           store: Ext.create('Ext.data.Store', 
           {................

    My tabHistoryPanel is contained in this layout. Essentially, there is a tree structure above the panel with the tabs.


    Code:
    return Ext.create('Ext.panel.Panel',
        { 
           border: false,
           layout:        
            {           
                  type: 'vbox',
                  align: 'stretch'        
            }, 
           items: 
            [ 
                  userTree, 
                  tabHistoryPanel 
            ] 
       });

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    3,116
    Vote Rating
    59
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    Not sure I understand everything you're trying to do. I created a tab panel with two grids in this Fiddle which seems to work:
    https://fiddle.sencha.com/#fiddle/4ra

    Not really sure how the tree fits in or if it is causing the issue.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    12
    Vote Rating
    0
    QuantumScripting is on a distinguished road

      0  

    Default


    Not sure why, but this fixed it.

    Code:
    return Ext.create('Ext.panel.Panel',
            {
                border: false,
                layout:
                {
                    type: 'vbox',
                    align: 'stretch'
                },
                items:
                [
                    userTree,
                    {
                        xtype: 'tabpanel',
                        name: 'historyTabs',
                        id: 'historyTabs',
                        flex: 1,
                        activeTab: 0, 
                        dockedItems: historyToolbar,
                        items: [                                                            
                                actionsGrid,
                                {
                                    title: 'Test',
                                    border: false,
                                    html: 'Testing'
                                }
                        ]
                    }
                ]
            });
    I just defined the tab panel in the returned panels items, instead of assigning it to a variable then putting that in the returned panels items.

Thread Participants: 1