Results 1 to 3 of 3

Thread: TabPanel tab body issue

  1. #1
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default TabPanel tab body issue

    It's time for me to understand this. I have a treepanel inside a window:

    http://folk.uio.no/janhov/img/win1.png

    Then, I put a tabpanel inside the window instead, containing the treepanel and another option. Now it looks like this:

    http://folk.uio.no/janhov/img/win2.png (window size expanded manually after removing the max height config)


    My code:

    Code:
    {
                xtype: 'textfield',
                id: 'map_tf',
                fieldLabel: i18n_parent_orgunit,
                typeAhead: true,
                editable: false,
                valueField: 'id',
                displayField: 'name',
                mode: 'remote',
                forceSelection: true,
                triggerAction: 'all',
                emptyText: GLOBALS.conf.emptytext,
                labelSeparator: GLOBALS.conf.labelseparator,
                selectOnFocus: true,
                width: GLOBALS.conf.combo_width,
                listeners: {
                    'focus': {
                        scope: this,
                        fn: function(tf) {
                            function showTree() {
                                var value, rawvalue;
                                var w = new Ext.Window({
                                    id: 'orgunit_w',
                                    title: 'Select parent organisation unit',
                                    closeAction: 'hide',
                                    autoScroll: true,
                                    width: 280,
                                    autoHeight: true,
                                    height: 'auto',
                                    boxMaxHeight: 500,
                                    items: [
                                        {
                                            xtype: 'tabpanel',
                                            activeTab: 0,
                                            layoutOnTabChange: true,
                                            deferredRender: false,
                                            plain: true,
                                            defaults: {
                                                layout: 'fit',
                                                bodyStyle: 'padding:8px; border:0px'
                                            },
                                            listeners: {
                                                tabchange: function(panel, tab) {
                                                    if (tab.id == 'maptab0') {
                                                        w.setHeight(500);
                                                        tab.syncSize();
                                                    }
                                                    else if (tab.id == 'maptab1') {
                                                        w.setHeight(150);
                                                    }
                                                }
                                            },
                                            items: [
                                                {
                                                    title: '<span class="panel-tab-title">Parent organisation unit</span>',
                                                    id: 'maptab0',
                                                    items: [
                                                        {
                                                            xtype: 'treepanel',
                                                            id: 'orgunit_tp',
                                                            bodyStyle: 'padding:7px',
                                                            height: GLOBALS.util.getMultiSelectHeight(),
                                                            autoScroll: true,
                                                            loader: new Ext.tree.TreeLoader({
                                                                dataUrl: GLOBALS.conf.path_mapping + 'getOrganisationUnitChildren' + GLOBALS.conf.type
                                                            }),
                                                            root: {
                                                                id: TOPLEVELUNIT.id,
                                                                text: TOPLEVELUNIT.name,
                                                                hasChildrenWithCoordinates: TOPLEVELUNIT.hasChildrenWithCoordinates,
                                                                nodeType: 'async',
                                                                draggable: false,
                                                                expanded: true
                                                            },
                                                            listeners: {
                                                                'click': function(n) {
                                                                    if (n.hasChildNodes()) {
                                                                        tf.setValue(n.attributes.text);
                                                                        tf.value = n.attributes.id;
                                                                        tf.node = n;
                                                                    }
                                                                },
                                                                'expandnode': {
                                                                    fn: function(n) {
                                                                        Ext.getCmp('orgunit_w').syncSize();
                                                                    }
                                                                },
                                                                'collapsenode': {
                                                                    fn: function(n) {
                                                                        Ext.getCmp('orgunit_w').syncSize();
                                                                    }
                                                                }
                                                            }
                                                        },
                                                        {
                                                            xtype: 'panel',
                                                            layout: 'table',
                                                            items: [
                                                                {
                                                                    xtype: 'button',
                                                                    text: 'Select',
                                                                    width: 133,
                                                                    scope: this,
                                                                    handler: function() {
                                                                        if (tf.getValue() && tf.getValue() != this.parentId) {
                                                                            this.loadFromDatabase(tf.value);
                                                                        }
                                                                        Ext.getCmp('orgunit_w').hide();
                                                                    }
                                                                },
                                                                {
                                                                    xtype: 'button',
                                                                    text: 'Cancel',
                                                                    width: 133,
                                                                    handler: function() {
                                                                        Ext.getCmp('orgunit_w').hide();
                                                                    }
                                                                }
                                                            ]
                                                        }
                                                    ]
                                                },
                                                {
                                                    title: '<span class="panel-tab-title">Level</span>',
                                                    id: 'maptab1',
                                                    items: [
                                                        {
                                                            xtype: 'combo',
                                                            id: 'maporganisationunitlevel_cb',
                                                            fieldLabel: 'Level',
                                                            typeAhead: true,
                                                            editable: false,
                                                            valueField: 'name',
                                                            displayField: 'name',
                                                            mode: 'remote',
                                                            forceSelection: true,
                                                            triggerAction: 'all',
                                                            emptyText: GLOBALS.conf.emptytext,
                                                            labelSeparator: GLOBALS.conf.labelseparator,
                                                            selectOnFocus: true,
                                                            width: GLOBALS.conf.combo_width,
                                                            store: GLOBALS.stores.organisationUnitLevel
                                                        }
                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                });
                                
                                var x = Ext.getCmp('center').x + 15;
                                var y = Ext.getCmp('center').y + 41;
                                w.setPosition(x,y);
                                w.show();
                            }
    
                            if (TOPLEVELUNIT) {
                                showTree.call(this);
                            }
                            else {
                                Ext.Ajax.request({
                                    url: GLOBALS.conf.path_commons + 'getOrganisationUnits' + GLOBALS.conf.type,
                                    params: {level: 1},
                                    method: 'POST',
                                    scope: this,
                                    success: function(r) {
                                        var rootNode = Ext.util.JSON.decode(r.responseText).organisationUnits[0];
                                        TOPLEVELUNIT = {
                                            id: rootNode.id,
                                            name: rootNode.name,
                                            hasChildrenWithCoordinates: rootNode.hasChildrenWithCoordinates
                                        };
                                        showTree.call(this);
                                    }
                                });
                            }
                        }
                    }
                }
            },

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

    Default

    At every point in the docs where you can put a Component in a Container, it desperately tries to impress upon the reader the importance of layout, what a layout does, and what happens if you omit to think about this.

    How have you got this far without seeing that?

  3. #3
    Sencha User
    Join Date
    Dec 2008
    Posts
    92

    Default

    Heh ok I get it (good question, though) and it works now. Stay tuned however, I might ignore layout again and post some more stupidity.

Similar Threads

  1. Ext.TAbPanel customized tab style Issue
    By kshaikh in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 17 Jan 2010, 11:58 PM
  2. Have Ext.TabPanel but which property points to the body of the tab
    By geewhizbang in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 24 Jul 2009, 6:18 AM
  3. TabPanel Issue - First tab closes, rest do not
    By ufchrisg in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 17 Dec 2008, 10:39 AM
  4. TabPanel tab body height
    By devnull in forum Ext 2.x: Help & Discussion
    Replies: 8
    Last Post: 23 Oct 2007, 8:12 AM

Posting Permissions

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