Sencha ExtJS Slicing a column into halves

Question

I have 4 column layout set up for the page. 1 of the columns, I want to divide it into two halves so I can have 2 separate input text fields. Below code works for simple html out as is but once I put the input field code replacing with html field, no input field shows up...

ExtJS column

 }, {
        xtype: 'container',
        layout: {
            'type':'column',
            'columns' : 2
        },
        items: [{
                xtype: 'container',
                columnWidth: 0.49,
                html: "part 1"
            }, {
                xtype: 'container',
                columnWidth: 0.49,
                html: "part 2"
            }]                
    }, {

ExtJS input field

            fieldLabel: 'Expiry',
            name: 'expiry',
            maskRe: /[0-9]+/,
            minLength: 4,
            maxLength: 4,

Answer 1

Have a look at below code snippet:

Ext.create('Ext.container.Container', {
    renderTo: Ext.getBody(),
    layout: {
        'type': 'column',
        'columns': 2
    },
    items: [{
        xtype: 'textfield',
        fieldLabel: 'Expiry',
        name: 'expiry',
        maskRe: /[0-9]+/,
        minLength: 4,
        maxLength: 4,
    }, {
        xtype: 'textfield',
        fieldLabel: 'Expiry',
        name: 'expiry',
        maskRe: /[0-9]+/,
        minLength: 4,
        maxLength: 4,
    }]
});

Working Example

Hope this will help/guide you.