View Full Version : Extending component - field render issue

14 Apr 2014, 10:46 PM
I am having render difficulties while extending DatePicker component.
I would like to add "timefield" bellow days table.
Problem is that timefield renderes with default width, ignoring my settings.

What I have (image attachec):

Ext.define('Ext.ux.DateTimePicker', {
extend: 'Ext.picker.Date',

onRender: function(container, position) {


this.timefield = new Ext.form.field.Time({
increment: 30,
format: "H:i",
minValue: "07:00",
maxValue: "18:00",
width: 60,
ownerCt: this,
fieldLabel: "Time",
labelWidth: 40,
value: Ext.Date.format(this.value, "H:i")

var table = Ext.get(Ext.DomQuery.selectNode('table', this.el.dom));

var elem = Ext.DomHelper.insertAfter(table, {
tag: "div",
}, true);



EDIT: Found out that this seems to be due to ComboBox Time field extends. For some reason widths don't get applied to the Time field table and input element.

15 Apr 2014, 10:24 AM
Turns out this is a layout issue. Field MUST be wrapped in container component which handles field layout properly. Complex fields like Time, Date, etc. depend heavly on.