PHP Code:
Ext.define("Ext.ux.NumberRange", {
extend: "Ext.form.field.Picker",
alias: 'widget.numberrange',
animCollapse: true,
initComponent: function () {
var self = this;
Ext.apply(self, {
fieldLabel: self.fieldLabel,
labelWidth: self.labelWidth
});
self.addEvents('groupSelected');
self.callParent();
},
createPicker: function () {
var self = this;
self.picker = Ext.create('Ext.menu.Menu', {
width: 150,
autoScroll: true,
floating: true,
shadow: true,
ownerCt: this.ownerCt,
items: [
{
xtype: 'fieldcontainer',
layout: 'hbox',
width: 144,
defaults: {
minValue: 0,
layout: 'hbox',
listeners: {
change: function (thisCmp, newValue) {
var minField = Ext.getCmp(self.id + '_min'), maxField = Ext.getCmp(self.id + '_max');
if (newValue <= thisCmp.minValue) {
thisCmp.setValue('');
}
if (minField.getValue() && !maxField.getValue()) {
Ext.getCmp(self.id + '_gte_op').enable();
Ext.getCmp(self.id + '_gt_op').enable();
Ext.getCmp(self.id + '_eq_op').enable();
Ext.getCmp(self.id + '_lte_op').disable();
Ext.getCmp(self.id + '_lt_op').disable();
Ext.getCmp(self.id + '_between_lte_lte_op').disable();
Ext.getCmp(self.id + '_between_lt_lt_op').disable();
Ext.getCmp(self.id + '_between_lt_lte_op').disable();
Ext.getCmp(self.id + '_between_lte_lt_op').disable();
} else if (!minField.getValue() && maxField.getValue()) {
Ext.getCmp(self.id + '_gte_op').disable();
Ext.getCmp(self.id + '_gt_op').disable();
Ext.getCmp(self.id + '_eq_op').enable();
Ext.getCmp(self.id + '_lte_op').enable();
Ext.getCmp(self.id + '_lt_op').enable();
Ext.getCmp(self.id + '_between_lte_lte_op').disable();
Ext.getCmp(self.id + '_between_lt_lt_op').disable();
Ext.getCmp(self.id + '_between_lt_lte_op').disable();
Ext.getCmp(self.id + '_between_lte_lt_op').disable();
} else if (minField.getValue() && maxField.getValue()) {
Ext.getCmp(self.id + '_gte_op').enable();
Ext.getCmp(self.id + '_gt_op').enable();
Ext.getCmp(self.id + '_eq_op').enable();
Ext.getCmp(self.id + '_lte_op').enable();
Ext.getCmp(self.id + '_lt_op').enable();
if (minField.getValue() < maxField.getValue()) {
Ext.getCmp(self.id + '_between_lte_lte_op').enable();
Ext.getCmp(self.id + '_between_lt_lt_op').enable();
Ext.getCmp(self.id + '_between_lt_lte_op').enable();
Ext.getCmp(self.id + '_between_lte_lt_op').enable();
} else {
Ext.getCmp(self.id + '_between_lte_lte_op').disable();
Ext.getCmp(self.id + '_between_lt_lt_op').disable();
Ext.getCmp(self.id + '_between_lt_lte_op').disable();
Ext.getCmp(self.id + '_between_lte_lt_op').disable();
}
} else {
Ext.getCmp(self.id + '_gte_op').disable();
Ext.getCmp(self.id + '_gt_op').disable();
Ext.getCmp(self.id + '_eq_op').disable();
Ext.getCmp(self.id + '_lte_op').disable();
Ext.getCmp(self.id + '_lt_op').disable();
Ext.getCmp(self.id + '_between_lte_lte_op').disable();
Ext.getCmp(self.id + '_between_lt_lt_op').disable();
Ext.getCmp(self.id + '_between_lt_lte_op').disable();
Ext.getCmp(self.id + '_between_lte_lt_op').disable();
}
}
}
},
items: [
{
xtype: 'numberfield',
name: self.id + '_min',
id: self.id + '_min',
allowDecimals: true,
flex: 1,
listeners: {
render: function (thisCmp) {
thisCmp.focus(true, true);
}
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/close.png',
tooltip: 'Close input assistance',
margin: '0 2 0 2',
handler: function () {
self.collapse();
}
},
{
xtype: 'numberfield',
name: self.id + '_max',
id: self.id + '_max',
allowDecimals: true,
flex: 1
}
]
},
{
xtype: 'buttongroup',
layout: 'hbox',
items: [
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/gte.png',
id: self.id + '_gte_op',
disabled: true,
handler: function () {
self.setValue('≥ ' + Ext.getCmp(self.id + '_min').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/gt.png',
id: self.id + '_gt_op',
disabled: true,
handler: function () {
self.setValue('> ' + Ext.getCmp(self.id + '_min').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/eq.png',
id: self.id + '_eq_op',
disabled: true,
margin: '0 7 0 7',
handler: function () {
self.setValue('= ' + (Ext.getCmp(self.id + '_min').getValue() || Ext.getCmp(self.id + '_max').getValue()));
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/lte.png',
id: self.id + '_lte_op',
disabled: true,
handler: function () {
self.setValue('≤ ' + Ext.getCmp(self.id + '_max').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/lt.png',
id: self.id + '_lt_op',
disabled: true,
handler: function () {
self.setValue('< ' + Ext.getCmp(self.id + '_max').getValue());
}
}
]
},
{
xtype: 'buttongroup',
layout: 'hbox',
items: [
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/between_lte_lte.png',
id: self.id + '_between_lte_lte_op',
disabled: true,
handler: function () {
self.setValue(Ext.getCmp(self.id + '_min').getValue() + ' ≤ X ≤ ' + Ext.getCmp(self.id + '_max').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/between_lt_lt.png',
id: self.id + '_between_lt_lt_op',
disabled: true,
handler: function () {
self.setValue(Ext.getCmp(self.id + '_min').getValue() + ' < X < ' + Ext.getCmp(self.id + '_max').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/reset_icon.png',
tooltip: 'Reset the field',
margin: '0 7 0 7',
handler: function () {
self.reset();
Ext.getCmp(self.id + '_min').reset();
Ext.getCmp(self.id + '_max').reset();
self.collapse();
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/between_lt_lte.png',
id: self.id + '_between_lt_lte_op',
disabled: true,
handler: function () {
self.setValue(Ext.getCmp(self.id + '_min').getValue() + ' < X ≤ ' + Ext.getCmp(self.id + '_max').getValue());
}
},
{
xtype: 'button',
icon: 'http://cdn.ayaline.com/sit/img/between_lte_lt.png',
id: self.id + '_between_lte_lt_op',
disabled: true,
handler: function () {
self.setValue(Ext.getCmp(self.id + '_min').getValue() + ' ≤ X < ' + Ext.getCmp(self.id + '_max').getValue());
}
}
]
}
]
});
return self.picker;
},
alignPicker: function () {
var me = this, picker, isAbove, aboveSfx = '-above';
if (this.isExpanded) {
picker = me.getPicker();
if (me.matchFieldWidth) {
if (me.bodyEl.getWidth() > this.treeWidth) {
picker.setWidth(me.bodyEl.getWidth());
} else {
picker.setWidth(this.treeWidth);
}
}
if (picker.isFloating()) {
picker.alignTo(me.inputEl, "", me.pickerOffset);
isAbove = picker.el.getY() < me.inputEl.getY();
me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls + aboveSfx);
picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
}
}
}
});
It renders like this :
Number Range Field with Picker
Reply With Quote
