PDA

View Full Version : Layout Not Filling Avaliable Space



azinyama
15 Oct 2012, 3:10 AM
Good day all!!! I have a form with feilds and grids on it. But I'm failing to get the grid at the bottom (added last) to fill the rest of the avaliable space. How do I get the grid to fill the rest of the space.
Code below:



{
xtype : 'fieldset',
title : 'Member Details',
region : 'center',
margin : '0 0 -12 0',
autoScroll : true,
latyout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
labelAlign : 'left'
},
items : [{
xtype : 'fieldcontainer',
fieldLabel : 'Name',
layout : 'hbox',
defaultType : 'textfield',
defaults : {
hideLabel : 'true',
labelAlign : 'left'
},
items : [{
xtype : 'combobox',
name : 'Title_RowID',
fieldLabel : 'Title',
labelWidth : 50,
width : 100,
store : 'Title',
queryMode : 'local',
valueField : 'Title_RowID',
displayField: 'Title_Descr',
emptyText : 'Title',
typeAhead : true,
allowBlank : false,
forceSelection: true
},
{
name : 'Member_FName',
fieldLabel : 'First Name',
emptyText : 'First Name',
margin : '0 0 0 6',
flex : 2,
allowBlank : false
},
{
name : 'Member_SName',
fieldLabel : 'Surname',
flex : 3,
margin : '0 0 0 6',
emptyText : 'Surname',
allowBlank : false
}]
},
{
xtype : 'fieldcontainer',
defaultType : 'textfield',
layout : {
type : 'hbox',
align : 'middle'
},
defaults : {
labelAlign : 'top'
},
items : [{
xtype : 'fieldset',
title : 'Contact Details',
layout : 'anchor',
defaultType : 'textfield',
margin : '0 3 0 0',
flex : 1,
defaults : {
hideLabel : 'true',
anchor : '100%',
labelAlign : 'top'
},
items : [{
fieldLabel : 'Address Line 01',
name : 'Member_Address_01',
emptyText : 'Address Line 01',
flex : 1,
allowBlank : false
},
{
fieldLabel : 'Address Line 02',
name : 'Member_Address_02',
emptyText : 'Address Line 02',
flex : 1,
allowBlank : false
},
{
fieldLabel : 'Address Line 03',
name : 'Member_Address_03',
emptyText : 'Address Line 03',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Cell #',
name : 'Member_Cell',
emptyText : 'Cellphone Number',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Phone #',
name : 'Member_Phone',
emptyText : 'Phone Number',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Email Address',
name : 'Member_Email',
vtype : 'email',
emptyText : 'Email Address',
flex : 1,
allowBlank : true
}]
},
{
xtype : 'fieldset',
title : 'Employer Details',
layout : 'anchor',
defaultType : 'textfield',
margin : '0 0 0 3',
flex : 1,
defaults : {
hideLabel : 'true',
anchor : '100%',
labelAlign : 'top'
},
items : [{
fieldLabel : 'Occupation',
name : 'Member_Occupation',
emptyText : 'Member Occupation',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Employer',
name : 'Member_Employer',
emptyText : 'Employer',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Address Line 01',
name : 'Employer_Address_01',
emptyText : 'Address Line 01',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Address Line 02',
name : 'Employer_Address_02',
emptyText : 'Address Line 02',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Phone Number',
name : 'Employer_Phone',
emptyText : 'Phone Number',
flex : 1,
allowBlank : true
},
{
fieldLabel : 'Fax Number',
name : 'Employer_Fax',
emptyText : 'Fax Number',
flex : 1,
allowBlank : true
}]
}]
},
{
xtype : 'fieldcontainer',
layout : {
type : 'vbox',
align : 'stretch'
},
items : [{
xtype : 'button',
name : 'newMember',
text : 'New Member'
}]
},
{
xtype : 'fieldcontainer',
layout : {
type: 'vbox',
align: 'stretch'
},
height : 120,
items : [{
xtype : 'gridpanel',
name : 'MemberProvider',
title : 'Member Provider',
closable : false,
resizable : false,
draggable : false,
border : false,
bodyBorder : false,
floating : false,
frame : false,
autoDestroy : true,
// store : 'MemberProvider',
flex : 1,
plugins : Ext.create('Ext.grid.plugin.RowEditing',
{
clicksToMoveEditor : 1,
errorSummary : false,
autoCancel : false
}),
viewConfig : {
stripeRows : true,
loadingText : 'Loading member providers...'
},
columns : [{
text : 'Member_Provider_RowID',
sortable : false,
hideable : false,
hidden : true,
dataIndex : 'Member_Provider_RowID'
},
{
text : 'Provider_RowID',
sortable : false,
hideable : false,
hidden : true,
dataIndex : 'Provider_RowID'
},
{
text : 'Provider',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'Provider_Name'
},
{
text : 'Member No.',
width : 200,
sortable : false,
hideable : false,
dataIndex : 'Member_No'
},
{
xtype : 'actioncolumn',
cls : 'tasks-icon-column-header tasks-delete-column-header',
width : 24,
icon : '../../extjs-4.1.1/resources/images/delete.png',
iconCls : 'x-hidden',
tooltip : 'Delete',
menuDisabled : true,
sortable : false,
handler : Ext.bind(this.handleDeleteMemberProviderClick, this)
}],
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
layout : 'table',
border : true,
bodyBorder : true,
items : [{
text : 'Add Member Provider',
iconCls : 'icon-add',
action : 'onAddMemberProvider'
}]
}]
}]
},
{
xtype : 'fieldcontainer',
layout : {
type: 'vbox',
align: 'stretch'
},
height : 150,
items : [{
xtype : 'gridpanel',
name : 'MemberDependant',
title : 'Member Dependants',
closable : false,
resizable : false,
draggable : false,
border : false,
bodyBorder : false,
floating : false,
frame : false,
autoDestroy : true,
// store : 'MemberDependant',
flex : 1,
viewConfig : {
stripeRows : true,
loadingText : 'Loading appointments...'
},
columns : [{
text : 'Dependant_RowID',
sortable : false,
hideable : false,
hidden : true,
dataIndex : 'Dependant_RowID'
},
{
text : 'Title',
width : 100,
sortable : false,
hideable : false,
dataIndex : 'Title_RowID',
editor : {
xtype : 'combobox',
allowBlank : false,
typeAhead : false,
selectOnTab : true,
forceSelection : true,
validateOnChange: true,
queryMode : 'local',
store : 'Title',
valueField : 'Title_RowID',
displayField : 'Title_Descr'
},
renderer : function(value, metaData, record, rowIndex, colIndex, store, view)
{
var catRecord = Ext.getStore('Title').findRecord('Title_RowID', value);

return catRecord ? catRecord.get('Title_Descr') : '';
}
},
{
text : 'First Name',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'Dependant_FName'
},
{
text : 'Surname',
flex : 2,
sortable : false,
hideable : false,
dataIndex : 'Dependant_SName'
},
{
text : 'Relationship',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'Relation_RowID',
editor : {
xtype : 'combobox',
allowBlank : false,
typeAhead : false,
selectOnTab : true,
forceSelection : true,
validateOnChange: true,
queryMode : 'local',
store : 'Relationship',
valueField : 'Relation_RowID',
displayField : 'Relation_Descr'
},
renderer : function(value, metaData, record, rowIndex, colIndex, store, view)
{
var catRecord = Ext.getStore('Relationship').findRecord('Relation_RowID', value);

return catRecord ? catRecord.get('Relation_Descr') : '';
}
},
{
xtype : 'actioncolumn',
cls : 'tasks-icon-column-header tasks-edit-column-header',
width : 24,
icon : '../../extjs-4.1.1/resources/images/edit_task.png',
iconCls : 'x-hidden',
tooltip : 'Edit',
menuDisabled : true,
sortable : false,
handler : Ext.bind(this.handleEditMemberDependantClick, this)
},
{
xtype : 'actioncolumn',
cls : 'tasks-icon-column-header tasks-delete-column-header',
width : 24,
icon : '../../extjs-4.1.1/resources/images/delete.png',
iconCls : 'x-hidden',
tooltip : 'Delete',
menuDisabled : true,
sortable : false,
handler : Ext.bind(this.handleDeleteMemberDependantClick, this)
}],
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
layout : 'table',
border : true,
bodyBorder : true,
items : [{
text : 'Add Member Dependant',
iconCls : 'icon-add',
action : 'onAddMemberDependant'
}]
}]
}]
},
{
xtype : 'fieldcontainer',
layout : {
type: 'vbox',
align: 'stretch'
},
flex : 1,
items : [{
xtype : 'gridpanel',
name : 'DependantHistory',
title : 'Dependant History',
closable : false,
resizable : false,
draggable : false,
border : false,
bodyBorder : false,
floating : false,
frame : false,
autoDestroy : true,
// store : 'DependantHistory',
flex : 1,
viewConfig : {
stripeRows: true,
loadingText: 'Loading appointments...'
},
columns : [{
text : 'Exam_RowID',
sortable : false,
hideable : false,
hidden : true,
dataIndex : 'Exam_RowID'
},
{
text : 'Exam Ref.',
width : 120,
sortable : false,
hideable : false,
dataIndex : 'Exam_RefNo'
},
{
text : 'Exam Date',
width : 120,
sortable : false,
hideable : false,
dataIndex : 'Exam Date'
},
{
text : 'Exam Details',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'Exam_Detail'
}]
}]
}]
}


Result:
39353

So I want the "Dependant History" grid to fill the remaining space in the Member Details fieldset.

mitchellsimoens
22 Oct 2012, 7:15 AM
For the fieldset, you have a typo on the layout config. Once I fixed that it all worked for me.

azinyama
22 Oct 2012, 9:08 PM
Well, that is embarrassing. I changed everything inside that fieldset fifty time and didn't even see that. :D

Thanx...