1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
    gianmarco is on a distinguished road

      0  

    Default vbox layout inside a tabpanel with deferredRender=false

    vbox layout inside a tabpanel with deferredRender=false


    Hi, this layout:
    Code:
    {
    	xtype: 'tabpanel',
    	activeTab: 0,
    	width: 500,
    	height: 280,
    	items: [ {
    		xtype: 'panel',
    		title: 'Tab 1'
    	}, {
    		xtype: 'panel',
    		title: 'Tab 2',
    		layout: 'absolute',
    		items: [ {
    			xtype: 'container',
    			width: 200,
    			height: 140,
    			x: 110,
    			y: 60,
    			layout: 'vbox',
    			layoutConfig: {
    				align: 'stretch'
    			},
    			items: [ {
    				xtype: 'label',
    				text: 'Label:'
    			}, {
    				xtype: 'textfield'
    			} ]
    		} ]
    	} ]
    }
    is rendered as expected.
    When i disable deferredRender on TabPanel, the Label and the TextField become invisible, and this is not the expected behavior.
    Following is the added code:
    Code:
    	deferredRender: false

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why overnest in a weird, (almost useless IMNSHO) absolute layout?

    Code:
    {
        xtype: 'tabpanel',
        activeTab: 0,
        width: 500,
        height: 280,
        items: [{
            xtype: 'panel',
            title: 'Tab 1'
        },
        {
            title: 'Tab 2',
            xtype: 'container',
            hideMode: 'offsets',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'label',
                text: 'Label:'
            },
            {
                xtype: 'textfield'
            }]
        }]
    }

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
    gianmarco is on a distinguished road

      0  

    Default


    Bucause i need it.. The code is just a distilled part of a more complex, dynamically generated, layout.

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,660
    Vote Rating
    584
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to use layoutOnTabChange: true.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
    gianmarco is on a distinguished road

      0  

    Default


    It works! Tank you all for support!

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Quote Originally Posted by gianmarco View Post
    Bucause i need it.. The code is just a distilled part of a more complex, dynamically generated, layout.
    I can't believe anyone really needs the absolute layout if they know how layouts work! Absolute layout is next to useless!

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
    gianmarco is on a distinguished road

      0  

    Default


    One note:
    adding
    Code:
    layoutOnTabChange: true
    on TabPanel make the inner controls became visible, but the layout is not as expected (it is a really complex absolute layout with inner vbox and hbox layout). With
    Code:
    hideMode: 'offsets'
    on inner components, as suggested by Animal, all look as expected (the initilal rendering of the page increase significantly)

  8. #8
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
    gianmarco is on a distinguished road

      0  

    Default


    In general ExtJS development i agree with you.

    But i'm dynamically generating a web UI based on a Borland Delphi DFM file.
    In the DFM file, component position is expressed with X,Y,Width,Height positioning.

    With this informations available, the best matching layout in ext to render a UI based on a DFM is to use absolute layout.

    Agree?

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Yes, if you are interpreting something which specifies X and Y as pixel positions.

Similar Threads

  1. Replies: 6
    Last Post: 8 Jun 2011, 3:43 AM
  2. Replies: 3
    Last Post: 23 Jul 2010, 6:19 AM
  3. deferredRender:false in tabpanel failed resizing with IE , BUG ?
    By stevanovich in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 20 Nov 2008, 2:55 PM

Thread Participants: 2