want to show two datepicker adjacent

Question

facing some issues while showing two datepicker on same panel. Want to show two datepicker adjacent

See the above screenshot.And my code

var datePicker = Ext.create('Ext.panel.Panel', { title: 'Choose a PSI Dates', width: 400, //bodyPadding: 10, //height: 200, renderTo: Ext.getBody(), items: [{ xtype: 'datepicker', minDate: minDate, handler: function(picker, date) { that.onDateSelected(date); } }, { xtype: 'datepicker', minDate: minDate, handler: function(picker, date) { that.onDateSelected(date); }
} ] });

Any suggestions on this. please

Answer 1

i think layout type hbox should solve your problem.

var datePicker = Ext.create('Ext.panel.Panel', {
                        title: 'Choose a PSI Dates',
                        width: 400,
                        layout: {
                            type: 'hbox',
                        },
                        renderTo: Ext.getBody(),
                        items: [{
                            xtype: 'datepicker',
                            minDate: minDate,
                            handler: function(picker, date) {
                                 that.onDateSelected(date);
                            }
                        },
                        {
                            xtype: 'datepicker',
                            minDate: minDate,
                            handler: function(picker, date) {
                                 that.onDateSelected(date);
                            }

                        }
                        ]
                    });