PDA

View Full Version : autoScroll: true Not Working When There Is A Component With A Flex Hieght



azinyama
24 Oct 2012, 4:45 AM
Good day all!!!

I have three grids that are in a fieldset with autoScroll set to true, using vbox layout. The top two have fixed heights and the last one has a flex value ('flex: 1'), so that if fills the remaining space. Problem comes when the browser is not maximized. The scrollbar appears, but the grid that has flex: 1 disappears and is not part of the scroll content. I have even tried setting the grids 'minHeight' with no luck. See code below:




{
xtype : 'fieldset',
title : 'Member/Dependant Details',
region : 'center',
margin : '0 0 -12 0',
autoScroll : true,
layout : {
type : 'vbox',
align : 'stretch'
},
defaults : {
labelAlign : 'left'
},
items : [{
xtype : 'fieldcontainer',
layout : {
type : 'vbox',
align : 'stretch'
},
height : 140,
items : [{
xtype : 'gridpanel',
name : 'MemberProvider',
title : 'Member Provider',
closable : false,
resizable : false,
draggable : false,
border : true,
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',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'Provider_RowID',
renderer : function(value, metaData, record, rowIndex, colIndex, store, view)
{
var catRecord = Ext.getStore('Provider').findRecord('Provider_RowID', value);

return catRecord ? catRecord.get('Provider_Name') : '';
}
},
{
text : 'Member No.',
width : 200,
sortable : false,
hideable : false,
dataIndex : 'Member_No',
editor : {
xtype : 'textfield',
allowBlank : false,
enableKeyEvents : true,
style : { textTransform: 'uppercase' },
listeners : {
change : function(field, newValue, oldValue)
{
field.setValue(newValue.toUpperCase());
}
}
}
},
{
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 : 160,
items : [{
xtype : 'gridpanel',
name : 'MemberDependant',
title : 'Member Dependants',
closable : false,
resizable : false,
draggable : false,
border : true,
bodyBorder : false,
floating : false,
frame : false,
autoDestroy : true,
store : 'MemberDependant',
flex : 1,
viewConfig : {
stripeRows : true,
loadingText : 'Loading member dependants...'
},
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 : true,
bodyBorder : false,
floating : false,
frame : false,
autoDestroy : true,
store : 'MemberDependantHistory',
minHeight : 200,
flex : 1,
viewConfig : {
stripeRows: true,
loadingText: 'Loading dependant history...'
},
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',
renderer : Ext.util.Format.dateRenderer('d/m/Y')
},
{
text : 'Exam Details',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'Exam_Detail'
}]
}]
}

scottmartin
24 Oct 2012, 8:18 AM
Any reason for placing grids inside of fieldsets / fieldcontainer?
Also, you have not specified the layout of your parent container.

Scott.

azinyama
24 Oct 2012, 1:36 PM
Thanx... I left the fieldset as it is and remove the fieldcontainer's. The rest the same; and now it's working...

Thanx again...