Results 1 to 8 of 8

Thread: Make a GridPanel Fill a Tab

  1. #1
    Sencha User
    Join Date
    Jun 2007
    Posts
    266
    Answers
    7

    Default Answered: Make a GridPanel Fill a Tab

    Here is a basic setup that I have:

    Code:
    Window (layout: 'fit')
        |_____ FormPanel
                       |__items:     xtype: 'container'
                                     layout: 'hbox' (top 1/2 is form fields, bottom 1/2 is TabPanel)
                                     items: 
                                     |
                                     |_____ form fields
                                     |
                                     |_____TabPanel (layout: 'fit')
                                                  |______items: 
                                                               |____(xtype:'grid', layout: 'fit')
    Each tab will have a grid in it. I have not set the width or height in the grid(s), I am just trying to get each grid to fill it's own tab. I remember coming across this problem a long time ago but don't remember how I fixed it. Google has told me to set the grid's layout in the tab to 'fit', but that doesn't seem to be working in my case. Where have I gone wrong?

    Thanks!

  2. Try the following:

    Code:
    xtype: 'form',
    border: false,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
       xtype: 'container',
       layout: {
           type: 'hbox',
           align: 'stretch'
       },
       items:[{
            xtype: 'container',
            //SOME FORM FIELDS
       }]
    },{
       flex: 1,
       layout: 'fit'
       xtype : 'clienttabpanel'
    }]

  3. #2
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62

    Default

    Here's an example of how you can do this:

    Code:
    Ext.create('Ext.window.Window', {
        layout: 'fit',
        autoShow: true,
        height: 300,
        width: 500,
        items: [{
            xtype: 'form',
            border: false,
            layout: 'fit',
            items: [{
                xtype: 'container',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [{
                    xtype: 'container',
                    html: 'some fields'
                }, {
                    xtype: 'tabpanel',
                    layout: 'fit',
                    flex: 1,
                    items: [{
                        xtype: 'grid',
                        title: 'First Tab',
                        store: [],
                        columns: [{
                            header: 'test'
                        }]
                    }, {
                        xtype: 'grid',
                        title: 'Second Tab',
                        store: [],
                        columns: [{
                            header: 'test 2'
                        }]
                    }]
                }]
            }]
        }]
    });

  4. #3
    Sencha User
    Join Date
    Jun 2007
    Posts
    266
    Answers
    7

    Default

    Thanks for the reply. When I made the setup like yours, the form elements filled the entire window, and the tabpanel got pushed out of view (creating the html, but not visible). More specifically, I believe it was putting the layout=fit on the formpanel. When I remove just that layout, it reverts back to my original issue.

    The original issue being everything is in it's proper place, but I can only see the column headers for the grid(s) in each tab.

  5. #4
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62

    Default

    The form panel should have layout fit because it only has one container in it.

  6. #5
    Sencha User
    Join Date
    Jun 2007
    Posts
    266
    Answers
    7

    Default

    Actually, the FormPanel is setup like this. My drawing my have been confusing:

    Code:
    xtype: 'form',
    border: false,
    layout: 'fit',
    items: [{
       xtype: 'container',
       layout: {
           type: 'hbox',
           align: 'stretch'
       },
       items:[{
            xtype: 'container',
            //SOME FORM FIELDS & a GRID
       }]
    },{
       flex: 1,
       layout: 'fit'
       xtype : 'clienttabpanel'
    }]
    What layout should I use in this case? The only thing not rendering correctly is the grid since I can only see the column headers. Here is the TabPanel:

    Code:
    Ext.define('APP.view.admin.ClientTabPanel', {
        extend: 'Ext.tab.Panel',
        alias: 'widget.clienttabpanel',
        
        requires: [
            'Ext.ux.TabScrollerMenu',
            'APP.view.admin.client.WebsiteGrid'
        ],
        title   : 'Accounts',
        layout  : 'fit',
        activeTab: 0,
        plugins: [{
            ptype: 'tabscrollermenu',
            maxText  : 15,
            pageSize : 5
        }],
        items: [{
            title: 'Websites',
            xtype : 'clientwebsitegrid',
            layout: 'fit'
        },{

  7. #6
    Sencha Premium User
    Join Date
    Feb 2011
    Location
    NJ
    Posts
    337
    Answers
    62

    Default

    Try the following:

    Code:
    xtype: 'form',
    border: false,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
       xtype: 'container',
       layout: {
           type: 'hbox',
           align: 'stretch'
       },
       items:[{
            xtype: 'container',
            //SOME FORM FIELDS
       }]
    },{
       flex: 1,
       layout: 'fit'
       xtype : 'clienttabpanel'
    }]

  8. #7
    Sencha User
    Join Date
    Jun 2007
    Posts
    266
    Answers
    7

    Default

    OOO, closer, but now some of my form elements disappeared. It shows the list (grid) at the top, but the form fields don't display.

    The top 1/2 should have some form elements & a list (grid). The bottom 1/2 has a tabpanel with one grid in each tab. Here is the current layout. Thanks for all the help! I think I need to watch all the layout videos I can after this.

    Code:
        border: false,
        //layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items:[{
                xtype: 'container',
                flex: 1,
                border:false,
                layout: 'anchor',
                defaultType: 'textfield',
                items: [{
                    fieldLabel: 'Name',
                    name: 'name',
                    anchor:'95%'
                }, {
                    fieldLabel: 'Short Name',
                    name: 'slug',
                    anchor:'95%'
                }]
            },{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                defaultType: 'checkbox',
                items: [{
                    fieldLabel: 'Current',
                    name: 'current',
                    anchor:'95%'
                },{
                    fieldLabel: 'Active',
                    name: 'active',
                    anchor:'95%'
                }]
            },{
                xtype : 'clientadminlist'
            }]
        },{
            //flex: 1,
            xtype : 'clienttabpanel'
        }]

  9. #8
    Sencha User
    Join Date
    Jun 2007
    Posts
    266
    Answers
    7

    Default

    Adding this to the form seems to have worked out for me. But since you got me there, I will accept your answer.

    layout: {
    type: 'vbox',
    align: 'stretch'
    },

    Can you suggest some posts and/or videos to watch to get up to speed on best way to use layouts?

Posting Permissions

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