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

      0  

    Default 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
    8,767
    Vote Rating
    239
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      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.


    Join me at SenchaCon 2016!

  3. #3
    Sencha User
    Join Date
    Jun 2013
    Posts
    17
    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