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,927
    Answers
    656
    Vote Rating
    443
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi