Sencha Touch Custom Picker Form Field
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!
Code:
/**
* @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 <gayatri@schogini.com>
*/
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:
Code:
{
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'},
]
}]
}]
}
