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

      0  

    Default Answered: Layout Not Filling Avaliable Space

    Answered: Layout Not Filling Avaliable Space


    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:

    Code:
    {
                                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:
    registration.jpg

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

  2. For the fieldset, you have a typo on the layout config. Once I fixed that it all worked for me.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    For the fieldset, you have a typo on the layout config. Once I fixed that it all worked for me.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    Well, that is embarrassing. I changed everything inside that fieldset fifty time and didn't even see that.

    Thanx...

Thread Participants: 1

Tags for this Thread