Form and layout...

[silve69]

Hello friends,

I have the follow structure:

Viewport (layout 'border')
     |_ west region
     |_ center region
          |_ panel (layout 'fit')
               |_ tabpanel
                    |_ tab 1 - portal
                    |_ tab 2 - grid
                    |_ tab 3 - formpanel (layout 'form')
                         - layout 'column'
                              . some items in column 1
                              . some items in column 2
                         - buttons in bbar
                         - listeners
     |_ south region

In the west region I have a menu and with each click I opened a new tab in the center tabpanel.
My issue:
If the opened tab has inside a grid (tab 2 in my example), it's resizing without problem when window is resized , but... if the tab has inside a form (tab 3 in my example) the form isn't resizing.
I KNOW THIS IS A LAYOUT PROBLEM, but I can't solve it... can somebody help me, please???

Best regards,
Silver

[marcvs]

can you post the configuration for your FormPanel. I use a FormPanel inside a resizable region. I have not specified width for it and it seems to be resizing properly.

[silve69]

Thanks marcvs,

Here the formpanel configuration:

groupName_cC_store = new Ext.data.JsonStore({ 
	... more code here ...
});

createCandidate_panel = new Ext.form.FormPanel({ 
	id: 'createCandidate',
	title: 'Create Candidate',
	closable: true,
	layout: 'form',
	viewConfig: { forceFit: true },
	items: [{
		layout: 'column',
		defaults: { layout:'form', defaultType:'textfield' },
		items:[{
			width: 270,
			items: [{ 
				name: 'firstname',
				fieldLabel: 'Name',
		 		anchor: '90%'
			},{ 
				name: 'lastname',
				fieldLabel: 'Last Name',	
				anchor: '90%'
			}]
		},{
			width: 270,
			items: [{
				name: 'email',
				fieldLabel: 'Email',
		 		anchor: '90%',
				vtype: 'email'
			},{
				xtype: 'combo',
				fieldLabel: 'Status',
				displayField: 'text',
				valueField: 'value',
				hiddenName: 'userstatusid',
				store: new Ext.data.ArrayStore({
				... more code here ...
			}]
		}]
	},{
		xtype:'tabpanel',
		plain:true,
		activeTab: 0,
		defaults: { bodyStyle:'padding:10px', layout:'form' },
		items:[{
			title:'Personal',
			items: [{
				xtype: 'radiogroup',
				fieldLabel: 'Gender',
				items: [
					{boxLabel: 'Female', name: 'gender', inputValue: 'F'},
					{boxLabel: 'Male', name: 'gender', inputValue: 'M'}
				]
			},{
				xtype: 'datefield',	
				name: 'birth',
				fieldLabel: 'Birth',
				showToday: false,
				format: 'd/m/Y',
				width:160
			},{
				xtype: 'combo',
				fieldLabel: 'Group',
				selectOnFocus:true,
				store: groupName_cC_store,
				displayField: 'text',
				valueField: 'value',
				hiddenName: 'groupid',
				width: 160,
				... more code here ...
			},{ 
				xtype: 'checkbox',
				name: 'ispublic',
				fieldLabel: 'Public?', 
				checked: false
			}]
		},{
			title:'Phones',
			defaults: {width:230, defaultType:'textfield' },
			items: [{ 
				name:'phone1', 
				fieldLabel:'Phone 1'
			},{
				name:'phone2', 
				fieldLabel:'Phone 2'
			},{ 
				name:'cell', 
				fieldLabel:'Cell'
			}]
		}]
	}],
	buttons: [{
		text: 'Create Candidate',
		handler: function(){
			... more code here ...
		}
	},{
		text: 'Cancel',
		handler: function(){
			... more code here ...
		}
	}]
});

Best regards,
Silver

[uniring]

You need to specify how to anchor the elements to the container, this is done using the anchor config option of the Ext.Field derivatives (fields).

Simply add this to the FormPanel config options:

...
defaults: {
    anchor: '-20'
},
...

The -20 px offset is to allow space for the validation icons, if you don't have the validation icons to the right of the fields use anchor: 0.

I see you added anchor: '90%' to some elements but not all, this can be your problem but if this doesn't solve your question I have another question for you, when you say that the form doesn't resize, it doesn't resize at all or only in height? Also a screenshot can help.

[Animal]

It's got 3 Panels in it.

None of which you have requested to have their size managed.

You just invented

	viewConfig: { forceFit: true },

And hoped against hope that it DID something!

[silve69]

Hi uniring,

- The whole panel isn't resizing in height.
- The two columns are resizing propertly.
- The tabpanel isn't resizing (width and height)
- Each panel inside tabpanel isn't resizing (width and height)

Best regards,
Silver

[silve69]

Friends,
I removed forceFit:true, and added anchor: '-20' in the formpanel config, but the result is the same.

[Animal]

OK, now show more code.

We need to see an unbroken hierarchy of Containers with layout configurations containing Components (which may contain hints to their owner Containers about how they want to be sized... such as "anchor")

[uniring]

If you want to learn more about the anchor option, read about it here.

The anchor: '-20' tell the items to fit the width (-20 px) of the container. As Animal said, some of your panels doesn't tell his containers how to anchor them, also if you want to anchor vertically you need to use anchor: '-20 0', but well, I don't want to break the Animal's think_it_yourself form of answer

[silve69]

OK, I have a viewport:

var viewport = new Ext.Viewport({
	layout:'border',
	items:[west,center,south]
});

With a center region where I'm opening tabs depending of west region menu's clicks.
The center region has the follow code:

var center = new Ext.Panel({
	id:'center-panel',
	region:'center',
	layout: 'fit',
	margins:'5 0 5 0',
	border: false,
	cls: 'font_header',
	resizeTabs:true,
	items: [{
		xtype:'tabpanel', 
		id: 'tabpanel',
		activeItem: 0,
		tabWidth:150, 
		border: false,
		items: [{
			xtype:'portal',
			title:'Mi HRTester', 
			id:'myHRTester', 
			iconCls:'myHRTester',
			closable:false,
			border: true,
			autoScroll:true,
			items:[{
				... here I'm showing some charts 
			}]
		}]
	}]
});

The function for oppening new tabs in the central tabpanel is:

function addPanelToCentralPanel(element, name) {
	var tab;
	var tp = Ext.getCmp('tabpanel');
	if (!(tab = tp.findById(element)))
		var tab = tp.add(eval(element+'_panel'));
	if (name) tab.setTitle(name);
	tp.setActiveTab(tab);
}

And now the before commented formpanel code:

groupName_cC_store = new Ext.data.JsonStore({ 
	... more code here ...
});

createCandidate_panel = new Ext.form.FormPanel({ 
	id: 'createCandidate',
	title: 'Create Candidate',
	closable: true,
	layout: 'form',
	viewConfig: { anchor: '-20' },
	items: [{
		layout: 'column',
		defaults: { layout:'form', defaultType:'textfield' },
		items:[{
			width: 270,
			items: [{ 
				name: 'firstname',
				fieldLabel: 'Name',
		 		anchor: '90%'
			},{ 
				name: 'lastname',
				fieldLabel: 'Last Name',	
				anchor: '90%'
			}]
		},{
			width: 270,
			items: [{
				name: 'email',
				fieldLabel: 'Email',
		 		anchor: '90%',
				vtype: 'email'
			},{
				xtype: 'combo',
				fieldLabel: 'Status',
				displayField: 'text',
				valueField: 'value',
				hiddenName: 'userstatusid',
				store: new Ext.data.ArrayStore({
				... more code here ...
			}]
		}]
	},{
		xtype:'tabpanel',
		plain:true,
		activeTab: 0,
		defaults: { bodyStyle:'padding:10px', layout:'form' },
		items:[{
			title:'Personal',
			items: [{
				xtype: 'radiogroup',
				fieldLabel: 'Gender',
				items: [
					{boxLabel: 'Female', name: 'gender', inputValue: 'F'},
					{boxLabel: 'Male', name: 'gender', inputValue: 'M'}
				]
			},{
				xtype: 'datefield',	
				name: 'birth',
				fieldLabel: 'Birth',
				showToday: false,
				format: 'd/m/Y',
				width:160
			},{
				xtype: 'combo',
				fieldLabel: 'Group',
				selectOnFocus:true,
				store: groupName_cC_store,
				displayField: 'text',
				valueField: 'value',
				hiddenName: 'groupid',
				width: 160,
				... more code here ...
			},{ 
				xtype: 'checkbox',
				name: 'ispublic',
				fieldLabel: 'Public?', 
				checked: false
			}]
		},{
			title:'Phones',
			defaults: {width:230, defaultType:'textfield' },
			items: [{ 
				name:'phone1', 
				fieldLabel:'Phone 1'
			},{
				name:'phone2', 
				fieldLabel:'Phone 2'
			},{ 
				name:'cell', 
				fieldLabel:'Cell'
			}]
		}]
	}],
	buttons: [{
		text: 'Create Candidate',
		handler: function(){
			... more code here ...
		}
	},{
		text: 'Cancel',
		handler: function(){
			... more code here ...
		}
	}]
});

I know the animal "think it yourself" form is more usefully for us, but in my case I have a very elementary english and I need to translate every post in "Google Translate"... and believe me, is very difficult to explain me sometimes.

Best regards,
Silver