1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    61
    Answers
    3
    Vote Rating
    0
    azinyama is on a distinguished road

      0  

    Default Answered: autoScroll: true Not Working When There Is A Component With A Flex Hieght

    Answered: autoScroll: true Not Working When There Is A Component With A Flex Hieght


    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:


    Code:
    {
    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'
    }]
    }]
    }

  2. Any reason for placing grids inside of fieldsets / fieldcontainer?
    Also, you have not specified the layout of your parent container.

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Answers
    665
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Any reason for placing grids inside of fieldsets / fieldcontainer?
    Also, you have not specified the layout of your parent container.

    Scott.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    61
    Answers
    3
    Vote Rating
    0
    azinyama is on a distinguished road

      0  

    Default


    Thanx... I left the fieldset as it is and remove the fieldcontainer's. The rest the same; and now it's working...

    Thanx again...

Thread Participants: 1

Tags for this Thread