PDA

View Full Version : [REOPEN] numberfield and selection



steffenk
8 Aug 2009, 7:31 AM
I wonder about the behaviour of numberfield. having a value inside, i can't select the value by doubleclick. Inspecting the input i can't see anything preventing this.
What's the reason for this?

steffenk
9 Aug 2009, 4:09 AM
hm - it seems to be a nesting problem.

If i make a simple Formpanel, all works fine:

new Ext.form.FormPanel({
layout: 'column',
renderTo: Ext.getBody(),
frame: true,
labelAlign: 'left',
labelWidth: 50,
forceLayout: true,
width: 200,
items: [{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'numberfield',
id: Ext.id() + '_hour',
maxLength: 2,
fieldLabel: 'Time',
width: 30,
minValue: 0,
maxValue: 24,
allowBlank: false,
labelSeparator: '',
tabIndex: 1
}]
},{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'numberfield',
id: Ext.id() + '_minute',
maxLength: 2,
fieldLabel: ':',
width: 30,
minValue: 0,
maxValue: 59,
allowBlank: false,
labelSeparator: '',
tabIndex: 2
}]
}]
});

but if i put the same in DatePicker, no selection is possible:


Ext.ux.DateTimePicker = Ext.extend(Ext.DatePicker, {

initComponent: function(){
Ext.ux.DateTimePicker.superclass.initComponent.call(this);
},


onRender : function(container, position){
Ext.ux.DateTimePicker.superclass.onRender.call(this, container, position);
this.formPanel = new Ext.form.FormPanel({
layout: 'column',
renderTo: this.el.child("td.x-date-bottom", true),
frame: true,
labelAlign: 'left',
labelWidth: 10,
forceLayout: true,
items: [{
columnWidth:.5,
layout: 'form',
items: [{
xtype: 'numberfield',
id: this.getId() + '_hour',
maxLength: 2,
fieldLabel: 'Time',
width: 30,
minValue: 0,
maxValue: 24,
allowBlank: false,
labelSeparator: '',
tabIndex: 1
}]
},{
columnWidth:.3,
layout: 'form',
items: [{
xtype: 'numberfield',
id: this.getId() + '_minute',
maxLength: 2,
fieldLabel: ':',
width: 30,
minValue: 0,
maxValue: 59,
allowBlank: false,
labelSeparator: '',
tabIndex: 2
}]
}]
});
}
});
Ext.reg( 'datetimepicker', Ext.ux.DateTimePicker );

Animal
9 Aug 2009, 4:35 AM
Looks like selection is explicitly disabled within the datepicker. Makes sense to avoid annoying selections taking place when you move the mouse around.

Yep. I looked at the source. Its onRender has



this.el.unselectable();

steffenk
9 Aug 2009, 5:00 AM
ah - thx for finding this. Ok, then i have to try appending it to be outside of el. As i see this is for complete element and not possible to have selectable it for a child.

unselectable : function(){
this.dom.unselectable = "on";
return this.swallowEvent("selectstart", true).
applyStyles("-moz-user-select:none;-khtml-user-select:none;").
addClass("x-unselectable");
}

steffenk
9 Aug 2009, 5:25 AM
i found a way, while overriding i replaced it with

this.el.select("table.x-date-inner").unselectable();

steffenk
10 Aug 2009, 12:27 AM
Hi,

i'm faced again this problem. I put it online so you can see it.
http://dev.sk-typo3.de/ext/datetimepicker.html

The plain picker works as expected. The DateTimeMenu doesn't. Weird that it does on IE (is selectable) but not in FF. I searched in Ext.menu.Menu but didn't found the unselectable call.

Also the control behaves different as dateclick resets time, but i have to examine this. It shouldn't as it uses the working ux.

steffenk
10 Aug 2009, 7:05 AM
i searched complete dom/css for this behaviour and can't find the reason for it. i feel like in a deadend now. Where should i search for?

Animal
10 Aug 2009, 7:12 AM
What's not working?

I see that the arrow keys are being hijacked so that you can't navigate in the time fields.

This is the internal navigation mechanism of the DatePicker.

steffenk
10 Aug 2009, 7:13 AM
Hi,

that's not the problem. You see that time fields are selectable, but not in the menuPicker (only in IE)

Animal
10 Aug 2009, 7:13 AM
You quite sure you need to put a <form> in there?

Animal
10 Aug 2009, 7:18 AM
You are not calling the DatePicker's superclass onRender.

I don't mean YOUR superclass onRender, I mean Ext.DatePicker.superclass.onRender

All base class onRenders still have to be executed.

steffenk
10 Aug 2009, 7:32 AM
ok, i missed that because i took complete function into mine, as i had to change one line in middle of the code.
Now if i insert
Ext.DatePicker.superclass.onRender.call(this);
i get JS error because some of mine vars are unknown then.

My understanding of this is parent::callFunction and this is only needed if i do something before or after, but not if i substitute the complete function.

and the form isn't needed really, i only used the form panel for easy creating the inputs, i could use dom only fields too.

Animal
10 Aug 2009, 7:43 AM
You must call superclass onRender so that the rest of the rendering process completes.

It should not cause errors. What errors exactly?

steffenk
10 Aug 2009, 7:45 AM
ct is undefined

i did it online so you can see the error.

For me it's obvious as now some elements are created twice, isn't it?

Animal
10 Aug 2009, 8:03 AM
You have to pass the arguments.

Always call using



blah.apply(this, arguments);


So that any arguments are always passed.