CODEWITHSUNDEEP
javascriptextjs
David
David

Reputation: 4271

How to get Displayfields in different lines

I can see here in my code i am getting only vertical display field. I want two of my display field in one line and other two in next line. How to get this.

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 450,
    bodyPadding: 10,
    title: 'Final Score',
    items: [{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    },{
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    },{
        xtype: 'displayfield',
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        xtype: 'displayfield',
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],
    buttons: [{
        text: 'Update'
    }]
});

Upvotes: 0

Views: 152

Answers (2)

Narendra Jadhav
Narendra Jadhav

Reputation: 10262

How to get this

You can achieve your required result using hbox and column layout.

  • Column is the layout style of choice for creating structural layouts in a multi-column format where the width of each column can be specified as a percentage or fixed width, but the height is allowed to vary based on the content. This class is intended to be extended or created via the layout:'column' Ext.container.Container#layout config, and should generally not need to be created directly via the new keyword.

  • hbox layout that arranges items horizontally across a Ext.container.Container. This layout optionally divides available horizontal space between child items containing a numeric flex configuration.

In this FIDDLE, I have created a demo using both layout. I hope this will help/guide your to achieve your requirement.

COLUMN LAYOUT CODE SNIPPET

//Usng column layout
Ext.create('Ext.form.Panel', {

    layout: 'column',

    bodyPadding: 10,

    title: 'Final Score',

    renderTo: Ext.getBody(),

    defaults: {
        columnWidth: '.5',
        xtype: 'displayfield',
    },

    items: [{
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }, {
        fieldLabel: 'Home',
        name: 'home_score',
        value: '10'
    }, {
        fieldLabel: 'Visitor',
        name: 'visitor_score',
        value: '11'
    }],
    buttons: [{
        text: 'Update'
    }]
});

HBOX LAYOUT CODE SNIPPET

//Usng hbox layout
Ext.create('Ext.form.Panel', {

    title: 'Final Score',

    renderTo: Ext.getBody(),

    bodyPadding: 10,

    defaults: {
        layout: 'hbox',
        flex: 1,
        defaults: {
            xtype: 'displayfield',
            flex: 1
        }
    },

    items: [{
        items: [{
            fieldLabel: 'Home',
            name: 'home_score',
            value: '10'
        }, {
            fieldLabel: 'Visitor',
            name: 'visitor_score',
            value: '11'
        }]
    }, {
        items: [{
            fieldLabel: 'Home',
            name: 'home_score',
            value: '10'
        }, {
            fieldLabel: 'Visitor',
            name: 'visitor_score',
            value: '11'
        }]
    }],

    buttons: [{
        text: 'Update'
    }]
});

Upvotes: 2

Zhorov
Zhorov

Reputation: 29943

It is possible to group displayfields in fieldcontainers, like the example below:

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 450,
    height: 450,
    bodyPadding: 10,
    title: 'Final Score',
    layout: 'vbox',
    items: [
    {
        xtype: 'fieldcontainer',
        layout: 'hbox',
        items: [
            {
                xtype: 'displayfield',
                fieldLabel: 'Home',
                name: 'home_score',
                value: '10'
            },
            {
                xtype: 'displayfield',
                width: 5
            },  
            {
                xtype: 'displayfield',
                fieldLabel: 'Visitor',
                name: 'visitor_score',
                value: '11'
            }
        ]
    },
    {
        xtype: 'fieldcontainer',
        layout: 'hbox',
        items: [
            {
                xtype: 'displayfield',
                fieldLabel: 'Home',
                name: 'home_score',
                value: '10'
            },
            {
                xtype: 'displayfield',
                width: 5
            },  
            {
                xtype: 'displayfield',
                fieldLabel: 'Visitor',
                name: 'visitor_score',
                value: '11'
            }
        ]
    }
    ],
    buttons: [{
        text: 'Update'
    }]
});

The example is tested with ExtJS 4.2.

Upvotes: 2

Related Questions