PDA

View Full Version : Do not want gap after last column in table layout



judy.zhu
23 Aug 2012, 9:39 PM
Hi there,

I am trying to create a very simple form using table layout:

38210

I managed to create the form with no trouble, but I do not want the gap on the right of the form. I understand that with Table layout, each flex takes up the same width. Is it possible to share the extra space between the first two fields only?

Thanks,
Judy

sword-it
23 Aug 2012, 10:16 PM
Hi,

You can use following code:




Ext.create('Ext.panel.Panel', {
title: 'Table Layout',
width: 450,
height: 150,
layout: {
type: 'table',
columns: 2
},
items: [
{
layout:'form'
, labelWidth:80
, border:false
, width:220
, style:'padding:5px;'
, labelSeparator:' '
, items:[
{
xtype:'textfield'
, fieldLabel:'Name'
, width:100
},
{
xtype:'textfield'
, fieldLabel:'Address'
, width:100
}
]
} ,{
layout:'form'
, labelWidth:80
, border:false
, width:220
, style:'padding:5px;'
, labelSeparator:' '
, items:[
{
xtype:'combo'
, fieldLabel:'Age'
, width:100
, store:['22','23']
},
{
xtype:'checkbox'
, boxLabel:'Male'
}
]
}],
renderTo: Ext.getBody()
});



Output:
38218

judy.zhu
26 Aug 2012, 2:12 PM
Thanks sword-it.

Unfortunately this is not what I want. I want the panel to expand *automatically* based on the width of the window that it is later added to. I used tableAttrs field for table layout so that it will expand the full width, but I do not want the last column to take the extra width.

For instance, after the panel is added to the window of width 900px, if each field is 200px long, the remaining white space would be 300px. Rather than adding 100px margin after all three columns, I want 150px margin after the the first and second column only.

Thanks a lot.

Below is the current code:



Ext.onReady(function() {
var panel = Ext.create('Ext.form.Panel', {
bodyPadding : '5px 0px 2px 10px',
fieldDefaults : {
labelAlign : 'left',
hideEmptyLabel : true,
style : {
marginBottom : '3px',
marginRight : '15px'
},
labelSeparator : "",
labelWidth : 70
},
frame : false,
border : false,
layout : {
type : 'table',
columns : 3,
tableAttrs : {
style : {
width : '100%'
}
}
}
});


// First row
var cellDelegate = new WebCellDelegate(null);


var field1 = Ext.create('Ext.form.field.Text', {
name : 'field1',
fieldLabel : 'Name1'
});
var field2 = Ext.create('Ext.form.field.Text', {
name : 'field2',
fieldLabel : 'Name2'
});
var field3 = Ext.create('Ext.form.field.Checkbox', {
name : 'field3',
fieldLabel : 'Name3'
});


panel.add([field1, field2, field3]);


// Second row
var field4 = Ext.create('Ext.form.field.Text', {
name : 'field4',
fieldLabel : 'Name4',
colspan : 2
});
var field6 = Ext.create('Ext.form.field.ComboBox', {
fieldLabel : 'Combo'
});
panel.add([field4, field6]);


// Third row
var field7 = Ext.create('Ext.form.field.Date', {
name : 'field7',
fieldLabel : 'Name7'
});
var field8 = Ext.create('Ext.form.field.Checkbox', {
name : 'field8',
fieldLabel : 'Name8'
});
panel.add([field7, field8]);


var window = Ext.create('Ext.window.Window', {
layout : 'fit',
width : 1000
});
window.add(panel);
window.show();
});


Cheers,
Judy