PDA

View Full Version : Clearable button for datefield


simon
19 Jun 2009, 4:10 AM
I would like to add clearable button to datefield (I think it should have it by default). I tried like this, it works, but positioning is not ok. Is tehere some other solution?



<html>
<head>

<script type="text/javascript">
Ext.onReady(function() {
var datefield = new Ext.form.DateField({
width: 220,
fieldLabel: 'Date',
name: 'date',
id: 'date1'
});
datefield.render('datefield');

var clearableField = new Ext.form.TriggerField({
triggerClass: "x-form-trigger x-form-clear-trigger",
emptyText: "",
value: ""
});
clearableField.onTriggerClick = function() {
this.reset();
};

clearableField.applyToMarkup(datefield.id);

});
</script>
</head>
<body>
<div id="datefield"></div>
</body>
</html>
evant
19 Jun 2009, 4:21 AM
Look at the source for TwinTriggerField, there's no "triggerClass".
Animal
19 Jun 2009, 4:29 AM
I think TriggerField should be done away with.

TwinTriggerField should be the base class for all fields which show a dropdown on click of a trigger.

The prototype should contain



trigger2Class: 'x-hide-display',


So that it defaults to looking like a regular single-trigger TriggerField.

The onTriggerClick and triggerClass function/class name should just be aliases for onTrigger1Click and trigger1Class.

This would save code, and make it easy to add extra trigger functionality to existing TriggerField subclasses.
Animal
19 Jun 2009, 4:34 AM
Our SelectField subclass has a second trigger. Receiving depot and Destination depot:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/newbooking.jpg
Animal
19 Jun 2009, 4:37 AM
While we're talking about it, TwinTriggerField (Let's forget about TriggerField) needs two more configs:



trigger1Tooltip: 'Click to see selection list',
trigger2Tooltip: 'Click to clear selection'
MatjazH
19 Jun 2009, 6:07 AM
I have borrowed a code from "Ext.ux.TwinCombo"




Ext.onReady(function() {

var trigger = new Ext.ux.TwinDateField({

width: 120,
name: 'date',
value: Ext.get('datum').getValue(),

trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-date-trigger',
onTrigger1Click: function() {

trigger.setValue('') ;

}
});

trigger.applyToMarkup('datum');
});

Ext.ux.TwinDateField = Ext.extend(Ext.form.DateField, {
initComponent: function() {
this.triggerConfig = {
tag:'span', cls:'x-form-twin-triggers', cn:[
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger2Class}
]};
Ext.ux.TwinDateField.superclass.initComponent.call(this);
},
getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
onTrigger2Click: Ext.form.DateField.prototype.onTriggerClick,
trigger1Class: Ext.form.DateField.prototype.triggerClass
});



Simon, have fun
pipiet06
3 Aug 2010, 11:40 PM
Our SelectField subclass has a second trigger. Receiving depot and Destination depot:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/newbooking.jpg


animal,, how if i wanna get the combo like "receiving report" which is have another button to clear value of the combo?
Animal
4 Aug 2010, 12:51 AM
Do a forum search for TwinTriggerCombo

Someone even posteda fix on the TwinTriggerCombo thread yesterday.
Animal
4 Aug 2010, 1:01 AM
Here: http://www.sencha.com/forum/showthread.php?12984-Feature-Request-Clearable-ComboBox&p=232225#post232225

And the fix is the last post.
pipiet06
4 Aug 2010, 1:09 AM
thanks for ur fast reply..

is that possible to create in ext 2.3 ?
pipiet06
4 Aug 2010, 1:55 AM
thanks animal..
my combobox it work nice at all..