Results 1 to 9 of 9

Thread: vbox layout inside a tabpanel with deferredRender=false

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
      0  

    Default 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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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'
            }]
        }]
    }
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
      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
    18,808
    Vote Rating
    904
      0  

    Default

    You need to use layoutOnTabChange: true.
    Evan Trimboli
    Twitter - @evantrimboli

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
      0  

    Default

    It works! Tank you all for support!

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      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!
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Location
    Modena, Italy
    Posts
    59
    Vote Rating
    1
      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
      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
    Bédoin/Redwood City
    Posts
    30,626
    Vote Rating
    56
      0  

    Default

    Yes, if you are interpreting something which specifies X and Y as pixel positions.
    Longtime Sencha geek. Outspoken advocate of pure Javascript Views. Posts my own opinions.

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

Posting Permissions

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