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

    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
    5,348
    Vote Rating
    111
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      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 human resources manager: fabienne.bell@sencha.com

  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