Question

var dr = Ext.create('Ext.FormPanel', {
    frame: true,
    //title: 'Date Range',
    bodyPadding: '5px 5px 0',
    width: 650,
    fieldDefaults: {
        labelWidth: 125,
        msgTarget: 'side',
        autoFitErrors: false
    },
    defaults: {
        width: 300
    },
    defaultType: 'datefield',
    items: [{
        fieldLabel: 'Start Date',
        name: 'startdt',
        id: 'startdt',
        vtype: 'daterange',
        endDateField: 'enddt' // id of the end date field
    }, {
        fieldLabel: 'End Date',
        name: 'enddt',
        id: 'enddt',
        vtype: 'daterange',
        startDateField: 'startdt' // id of the start date field
    }, {
        xtype: 'combobox',
        fieldLabel: 'Vehicle',
        name: 'state11212',
        store: cmbstore,
        valueField: 'DeviceID',
        displayField: 'VehicleNo',
        typeAhead: true,
        queryMode: 'local',
        emptyText: 'Select a Vehicle...'
    }]
});

this code will have 3 row,
1st row is start date field
2nd row is end date field
3rd row is combobox.

Question

how to make the 1st row become 2 column,and end date field at the second column,mean end date field is on the right side of start date field?

Answer 1

You can use the hbox layout (layout: 'hbox'):

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

Working example: http://jsfiddle.net/nue7j/