Results 1 to 3 of 3

Thread: [3.1.1.] Column Layout inside Tabs Resizing and cutting off fields

  1. #1

    Question [3.1.1.] Column Layout inside Tabs Resizing and cutting off fields

    Hello all-

    I am having an issue with column layout inside of a tab panel. Basically, if you run the code below, when the first tab initially loads, the widths and everything are perfect. If you click to the second tab, then click back to the first, however, the first tab's layout gets all screwy and the combo boxes in the first column get cut off...

    Code:
    var tabs = new Ext.TabPanel({
    	title: 'test columns in tabs'
      , activeTab: 0
      , width: 790
      , plain: true
      , frame: false
      , hideMode: 'offsets'
      , bodyStyle: 'padding: 8px;'
      , defaults: {
    		border: false
    	  , plain: true
    	  , frame: false
    	}
      , items: [{
    		xtype: 'panel'
    	  , defaults: {
    			border: false
    		  , plain: true
    		  , frame: false
    		}
    	  , title: 'tab with combos'
    	  , layout: 'column'
    	  , columns: 2
    	  , items: [{
    			xtype: 'form'
    		  , labelWidth: 195
    		  , columnWidth: .6
    		  , defaults: {
    				border: false
    			  , plain: true
    			  , frame: false
    			}
    		  , items: [{
    				xtype: 'combo'
    			  , fieldLabel: 'Microsoft Word Documents'
    			  , store: new Ext.data.ArrayStore({
    					fields: ['text']
    				  , data: [['lalala']]
    				})
    				, displayField: 'text'
    			}, {
    				xtype: 'combo'
    			  , fieldLabel: 'Microsoft Powerpoint Documents'
    			  , store: new Ext.data.ArrayStore({
    					fields: ['text']
    				  , data: [['lalala']]
    				})
    			  , displayField: 'text'
    			}]
    		}, {
    			xtype: 'form'
    		  , defaults: {
    				border: false
    			  , plain: true
    			  , frame: false
    			}
    		  , items: [{
    				xtype: 'combo'
    			  , fieldLabel: 'Audio Files'
    			  , defaults: {
    					border: false
    				  , plain: true
    				  , frame: false
    				}
    			  , store: new Ext.data.ArrayStore({
    					fields: ['text']
    				  , data: [['lalala']]
    				})
    			  , displayField: 'text'
    			}, {
    				xtype: 'combo'
    			  , fieldLabel: 'Video/Movie Files'
    			  , store: new Ext.data.ArrayStore({
    					fields: ['text']
    				  , data: [['lalala']]
    				})
    			  , displayField: 'text'
    			}]
    		}]
    	}, {
    		title: 'tab without'
    	  , html: 'click here, then click back'
    	}]
    });
    I have also attached screenshots of the initial load look, and the post-changing-tabs look.

    Anyone run into this before? I searched the forums, and tried adding "hideMode: 'offsets'" to both the tab panel and the column layout, but neither of those made any difference.

    Thanks!
    Attached Images Attached Images

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

    Default

    Overnesting in a no-layout Panel

  3. #3

    Cool

    Sorry, could you expand on that a little? Which panel would need a defined layout, and what layout would be equivalent to a "non-layout".... Meaning what layout won't force some other constraint? I apologize, I haven't ever read anything about overnesting with Ext.

Posting Permissions

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