Page 1 of 2 12 LastLast
Results 1 to 10 of 15

Thread: [REOPEN] numberfield and selection

  1. #1
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default [REOPEN] numberfield and selection

    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?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #2
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    hm - it seems to be a nesting problem.

    If i make a simple Formpanel, all works fine:
    Code:
    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:
    Code:
    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 );
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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

    Code:
            this.el.unselectable();

  4. #4
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    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.
    Code:
    unselectable : function(){
         this.dom.unselectable = "on";
         return this.swallowEvent("selectstart", true).
             applyStyles("-moz-user-select:none;-khtml-user-select:none;").
             addClass("x-unselectable");
    }
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    i found a way, while overriding i replaced it with
    Code:
    this.el.select("table.x-date-inner").unselectable();
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  6. #6
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    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.
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  7. #7
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    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?
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  9. #9
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    Hi,

    that's not the problem. You see that time fields are selectable, but not in the menuPicker (only in IE)
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    You quite sure you need to put a <form> in there?

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •