PDA

View Full Version : Sencha Touch Custom Picker Form Field



gayati.sa
19 Sep 2011, 5:32 AM
Currently I see that Sencha Touch has a date picker form field and just a picker field but, doesn't have a general picker field that can be used in forms. Looking at the code of the date picker form field and with my limited knowledge I have put up this quick solution to be able to use any picker in a form. You can define the columns just as you would in the normal picker field.
This works for me and I am using it in a few projects so, I thought I might as well post it up for some to use as it is or maybe enhance or revamp!


/**
* @class Ext.form.SchPicker
* @extends Ext.form.Field
*

Specialized field which has a button which when pressed, shows a {@link Ext.Picker}
with columns that you have defined.

* @xtype schpickerfield
* @author Gayatri S Ajith <[email protected]>
*/
Ext.form.SchPicker = Ext.extend(Ext.form.Field, {
ui: 'select',
picker: null,
destroyPickerOnHide: false,
initComponent: function() {
this.addEvents(
'change'
);

this.tabIndex = -1;
this.useMask = true;
Ext.form.Text.superclass.initComponent.apply(this, arguments);
},
getSchPicker: function() {
if (!this.schPicker) {
if (this.picker instanceof Ext.Picker) {
this.schPicker = this.picker;
} else {
this.schPicker = new Ext.Picker(Ext.apply(this.picker || {}));
}

this.schPicker.setValue(this.value || null);
this.schPicker.on({
scope : this,
change: this.onPickerChange,
hide : this.onPickerHide
});
}

return this.schPicker;
},
onMaskTap: function() {
if (Ext.form.SchPicker.superclass.onMaskTap.apply(this, arguments) !== true) {
return false;
}

this.getSchPicker().show();
},

/**
* Called when the picker changes its value
* @param {Ext.SchPicker} picker The date picker
* @param {Object} value The new value from the date picker
* @private
*/
onPickerChange : function(picker, value) {
this.setValue(value);
this.fireEvent('change', this, this.getValue());
},

/**
* Destroys the picker when it is hidden, if
* {@link Ext.form.SchPicker#destroyPickerOnHide destroyPickerOnHide} is set to true
* @private
*/
onPickerHide: function() {
if (this.destroyPickerOnHide && this.schPicker) {
this.schPicker.destroy();
}
},

// inherit docs
/**
* this will set the value of the picker and will also store the value
* in the format specified. If format is not specified then, it will
* just concat the columns separated with a pipe(|)
*/
setValue: function(value, animated) {
this.value = value;
if (this.schPicker) {
this.schPicker.setValue(value, animated);
this.value = (value != null) ? this.schPicker.getValue() : null;
}
if (Ext.isObject(this.value)) {
if (!this.valueFormat) {
var str = '';
for (var k in this.value) {
str += this.value[k] + '|';
}
this.value = str.substr(0, str.length-1);
} else {
var i = 0;
var str = this.valueFormat;
for (var k in this.value) {
str = str.replace(k, this.value[k])
}
this.value = str;
}
}
if (this.rendered) {
this.fieldEl.dom.value = this.getValue(true);
}

return this;
},


/**
* Returns the value of the field, which will be a {@link Date} unless the format parameter is true.
* @param {Boolean} format True to format the value with Ext.util.Format.defaultDateFormat
*/
getValue: function(format) {
var value = this.value || null;
return value;
},

// @private
onDestroy: function() {
if (this.schPicker) {
this.schPicker.destroy();
}

Ext.form.SchPicker.superclass.onDestroy.call(this);
}
});

Ext.reg('schpickerfield', Ext.form.SchPicker);

And this is how I use it:


{
xtype: 'form',
items: [{
xtype: 'fieldset',
defaults: {
labelWidth: '30%'
},
title: 'Event Form',
items: [{
xtype: 'textfield',
name: 'event',
label: 'Event Name',
}, {
xtype: 'schpickerfield',
name: 'time',
label: 'Event Time',
value: '',
valueFormat: 'hour:mins ampm', // note that we are using the column names in the format.
// if the could names do not match then, it will not be replaced.
picker: {
useTitles: true,
slots: [
{
name : 'hour',
title: 'Hour',
data : [
{text: '1', value: '1'},
{text: '2', value: '2'},
{text: '3', value: '3'},
{text: '4', value: '4'},
{text: '5', value: '5'},
{text: '6', value: '6'},
{text: '7', value: '7'},
{text: '8', value: '8'},
{text: '9', value: '9'},
{text: '10', value: '10'},
{text: '11', value: '11'},
{text: '12', value: '12'},
]
}, {
name : 'mins',
title: 'Min',
data : [
{text: '00', value: '00'},
{text: '15', value: '15'},
{text: '30', value: '20'},
{text: '45', value: '45'},
]
}, {
name : 'ampm',
title: 'AM/PM',
data : [
{text: 'am', value: 'am'},
{text: 'pm', value: 'pm'}
]
}
]
}
}, {
xtype: 'selectfield',
name: 'frequency',
label: 'Repeat',
options: [
{text: 'Every day', value: 'every day'},
{text: 'Every week', value: 'every week'},
{text: 'Every month', value: 'every month'},
{text: 'Every 6 months', value: 'every 6 months'},
{text: 'Every year', value: 'every year'},
]
}]
}]
}

Jepse
23 Sep 2011, 2:59 AM
Wonderfull! Did you get the useTitles option working?

gayati.sa
23 Sep 2011, 4:14 AM
Ahh...you noticed!
I found out that useTitles is not working a couple of days ago. Will definitely update this code as soon as I find a fix. :-?

Regards Gayatri.

Jepse
23 Sep 2011, 4:22 AM
Sound good. I found this thread, with a similar solution: http://www.sencha.com/forum/showthread.php?120010-OPEN-711-(1.0.2)-Picker-and-useTitles-bug/page3

But i couldn't adapt it. Maybe you can.

gayati.sa
2 Oct 2011, 6:39 PM
I haven't been able to find a solution to this yet. The link above this seems to be doing something different from what I have done. Not sure...will you keep you posted if, I find anything.

Regards.

siebmanb
30 Oct 2011, 1:28 AM
@gayati.sa your code works great. Thanks a lot for that. I have one question though : how do you change the width of the name field on the left ? I couldn't find any way to apply a CSS to this left part of the picker...

Have a nice day.
Thanks

cclark
28 Sep 2012, 9:41 AM
Is there an updated version of this for the latest version of ST?

socca1157
14 Feb 2014, 10:52 AM
I would love to solve this for Sencha 2!

nhamnt89
17 May 2015, 11:57 PM
Yes i can very for

saharali
17 Nov 2015, 7:17 AM
But i couldn't adapt it. Maybe you can.


http://imgupp.com/img/1442154980.jpg (http://imgupp.com/1442154980.html)