1. #1
    Sencha User
    Join Date
    Dec 2011
    Location
    Poitiers, France
    Posts
    20
    Vote Rating
    3
    youss.imzourh is on a distinguished road

      0  

    Default Number Range Field with Picker

    Number Range Field with Picker


    Hi all,

    This is a little extension to draw a text field with picker that allows user to select a number range.

    PHP Code:
    Ext.define("Ext.ux.NumberRange", {
        
    extend"Ext.form.field.Picker",
        
    alias'widget.numberrange',
        
    animCollapsetrue,
        
    initComponent: function () {
            var 
    self this;
            
    Ext.apply(self, {
                
    fieldLabelself.fieldLabel,
                
    labelWidthself.labelWidth
            
    });
            
    self.addEvents('groupSelected');
            
    self.callParent();
        },
        
    createPicker: function () {
            var 
    self this;
            
    self.picker Ext.create('Ext.menu.Menu', {
                
    width150,
                
    autoScrolltrue,
                
    floatingtrue,
                
    shadowtrue,
                
    ownerCtthis.ownerCt,
                
    items: [
                    {
                        
    xtype'fieldcontainer',
                        
    layout'hbox',
                        
    width144,
                        
    defaults: {
                            
    minValue0,
                            
    layout'hbox',
                            
    listeners: {
                                
    change: function (thisCmpnewValue) {
                                    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',
                                
    nameself.id '_min',
                                
    idself.id '_min',
                                
    allowDecimalstrue,
                                
    flex1,
                                
    listeners: {
                                    
    render: function (thisCmp) {
                                        
    thisCmp.focus(truetrue);
                                    }
                                }
                            },
                            {
                                
    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',
                                
    nameself.id '_max',
                                
    idself.id '_max',
                                
    allowDecimalstrue,
                                
    flex1
                            
    }
                        ]
                    },
                    {
                        
    xtype'buttongroup',
                        
    layout'hbox',
                        
    items: [
                            {
                                
    xtype'button',
                                
    icon'http://cdn.ayaline.com/sit/img/gte.png',
                                
    idself.id '_gte_op',
                                
    disabledtrue,
                                
    handler: function () {
                                    
    self.setValue('≥ ' Ext.getCmp(self.id '_min').getValue());
                                }
                            },
                            {
                                
    xtype'button',
                                
    icon'http://cdn.ayaline.com/sit/img/gt.png',
                                
    idself.id '_gt_op',
                                
    disabledtrue,
                                
    handler: function () {
                                    
    self.setValue('> ' Ext.getCmp(self.id '_min').getValue());
                                }
                            },
                            {
                                
    xtype'button',
                                
    icon'http://cdn.ayaline.com/sit/img/eq.png',
                                
    idself.id '_eq_op',
                                
    disabledtrue,
                                
    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',
                                
    idself.id '_lte_op',
                                
    disabledtrue,
                                
    handler: function () {
                                    
    self.setValue('≤ ' Ext.getCmp(self.id '_max').getValue());
                                }
                            },
                            {
                                
    xtype'button',
                                
    icon'http://cdn.ayaline.com/sit/img/lt.png',
                                
    idself.id '_lt_op',
                                
    disabledtrue,
                                
    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',
                                
    idself.id '_between_lte_lte_op',
                                
    disabledtrue,
                                
    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',
                                
    idself.id '_between_lt_lt_op',
                                
    disabledtrue,
                                
    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',
                                
    idself.id '_between_lt_lte_op',
                                
    disabledtrue,
                                
    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',
                                
    idself.id '_between_lte_lt_op',
                                
    disabledtrue,
                                
    handler: function () {
                                    
    self.setValue(Ext.getCmp(self.id '_min').getValue() + ' ≤ X < ' Ext.getCmp(self.id '_max').getValue());
                                }
                            }
                        ]
                    }
                ]
            });
            return 
    self.picker;
        },
        
    alignPicker: function () {
            var 
    me thispickerisAboveaboveSfx '-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 :
    numberrange.png

    Hope this will be useful for some of you.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,642
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Pretty cool little widget!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread