Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: TabPanel fit content

  1. #1
    Ext User
    Join Date
    Jan 2010
    Posts
    68

    Default TabPanel fit content

    I have a TabPanel where I add different kind of content, grids, forms, etc... but I have a common problem: when I add, for example a GridPanel, when the grid is loading its content I see the PagingBar at top of the panel, and when the data is loaded, the PagingBar goes to its place (at bottom). I have the same problem with tabbed forms where tabs position is defined as bottom.

    The final result is the desired, but when the form or the grid data is loading the effect the user sees is very ugly! How can I avoid this strange effect? I use layout fit for my main tab panel.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    How did you configure you tabpanel and tabitems?

  3. #3
    Ext User
    Join Date
    Jan 2010
    Posts
    68

    Default

    My main tab panel looks like follows:

    Code:
    var desktop = new Ext.TabPanel({
            id: 'desktop-tab-panel',
            border: false,
            enableTabScroll: true,
            activeTab: 0,
            deferredRender: true,
            layoutOnTabChange: true,
            frame: true,
            resizeTabs: true, // turn on tab resizing
            minTabWidth: 150,
            tabWidth: 150,
            defaults: {
                closable: true,
                autoScroll: true,
                layout: 'fit'
            }
    });
    And tab items, for example, a grid I add:

    Code:
        var examplesGrid = new Ext.grid.GridPanel({
            id: 'examples-projects-grid',
            //title: '<?=_("Example Projects")?>',
            store: examplesData,
            view: new Ext.grid.GroupingView({
                emptyText: '<?=_("There is no available examples")?>',
                deferEmptyText: true,
                forceFit: true,
                //showGroupName: true,
                //enableNoGroups: false,
                //hideGroupedColumn: true,
                showGroupName: false,
                enableNoGroups: true,
                hideGroupedColumn: true,
                groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
            }),
            loadMask: true,
            autoHeight: false,
            stripeRows: true,
            autoexpand: 'ex-prj-desc-col',
            plugins: [editor/*,filters*/],
            border: false,
            
            columns: [...],
            bbar: new Ext.PagingToolbar({
                pageSize: 20,
                store: examplesData,
                displayInfo: true,
                displayMsg: '<?=_("Displaying examples {0} - {1} of {2}")?>',
                emptyMsg: '<?=_("No examples found")?>'
            })
        });

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    Are the TabPanel height and width set by it's container?

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    Or, do you in fact add to the TabPanel, a Panel which contains examplesGrid? Or do you render it? You cunningly conceal this.

  6. #6
    Ext User
    Join Date
    Jan 2010
    Posts
    68

    Default

    No. The TabPanel is inside the central region of a ViewPort:

    Code:
        var centralPanel = {
            //title: '<?=_("Desktop")?>',
            region: 'center',
            margins:'0 0 5 0',
            layout: 'fit',
            border: true,
            items: desktop
        };
    
        var mainView = new Ext.ViewPort({
            id: id,
            renderTo: Ext.getBody(),
            layout: 'border',
            border: false,
            items: [northPanel,southPanel,westPanel,eastPanel,centralPanel]
        });

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    So how does that GridPanel get added? THAT'S what I'm asking. Show that code.

  8. #8
    Ext User
    Join Date
    Jan 2010
    Posts
    68

    Default

    My Grid is inside a Panel, and I add this panel to the TabPanel:

    Code:
        var gridInPanel = Ext.Panel({
            id: id,
            title: '<?=_("Examples: Projects")?>',
            layout: 'fit',
            items: [examplesGrid]
        });

  9. #9
    Ext User
    Join Date
    Jan 2010
    Posts
    68

    Default

    desktop.add(gridInPanel).show();

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    I thought you wanted to put the GridPanel into the TabPanel?????

Page 1 of 2 12 LastLast

Similar Threads

  1. Resize combobox to fit its content
    By itrushn in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 27 Apr 2010, 9:57 AM
  2. Why content in portlet not fit into whole panel area?
    By fangzhouxing in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 8 Apr 2008, 3:45 PM
  3. Resizing Panel to fit its content.
    By edovale in forum Ext 1.x: Help & Discussion
    Replies: 0
    Last Post: 14 Dec 2007, 11:42 AM
  4. Resize dialog to fit content
    By thaberkern in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 1 Aug 2007, 7:43 AM
  5. fit to content
    By heidtmare in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 10 Apr 2007, 3:05 PM

Posting Permissions

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