Results 1 to 4 of 4

Thread: fieldcontainer only works with layout : hbox ?

  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Answers
    13

    Default Answered: fieldcontainer only works with layout : hbox ?

    heres the documentation with live example
    http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.FieldContainer

    tried to change the layout to vbox (editing the live code example) to arrange fields in a vertical way, and shows nothing, not even an error.

    FieldContainer only works with hbox layout ?

  2. Am not much familiar with FieldContainer. However the layout 'anchor' is able to arrange those fields in a vertical way.

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'FieldContainer Example',
        width: 550,
        bodyPadding: 10,
    
        items: [{
            xtype: 'fieldcontainer',
            fieldLabel: 'Last Three Jobs',
            labelWidth: 100,
    
            // The body area will contain three text fields, arranged
            // horizontally, separated by draggable splitters.
            layout: 'anchor',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        }],
        renderTo: Ext.getBody()
    });

  3. #2
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Answers
    4

    Default

    Am not much familiar with FieldContainer. However the layout 'anchor' is able to arrange those fields in a vertical way.

    Code:
    Ext.create('Ext.form.Panel', {
        title: 'FieldContainer Example',
        width: 550,
        bodyPadding: 10,
    
        items: [{
            xtype: 'fieldcontainer',
            fieldLabel: 'Last Three Jobs',
            labelWidth: 100,
    
            // The body area will contain three text fields, arranged
            // horizontally, separated by draggable splitters.
            layout: 'anchor',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        }],
        renderTo: Ext.getBody()
    });

  4. #3
    Sencha User
    Join Date
    Apr 2010
    Posts
    29
    Answers
    4

    Default

    Also vbox is working when you provide height.
    Code:
    Ext.create('Ext.form.Panel', {
        title: 'FieldContainer Example',
        width: 550,
        bodyPadding: 10,
    
        items: [{
            xtype: 'fieldcontainer',
            fieldLabel: 'Last Three Jobs',
            labelWidth: 100,
            height:100,
            
            // The body area will contain three text fields, arranged
            // horizontally, separated by draggable splitters.
            layout: 'vbox',
            items: [{
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }, {
                xtype: 'splitter'
            }, {
                xtype: 'textfield',
                flex: 1
            }]
        }],
        renderTo: Ext.getBody()
    });

  5. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Answers
    13

    Default

    you again, next time ill ask you directly , ill be your nightmare.

    thank you very much.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •