Example:Add slots, set selected values and read values picker

[kortovos]

This picker enables a user to input the mileage of his car (up to 999.999). It show the basic functions of a picker (add slots, set selected values and read values).

It adds 6 slots with values from 0 to 9 the first time it is shown. It also sets the selected values of the slots to those of the numberfield.

(function() {
    var picker = new Ext.Picker( {
        slots : [],
        height : 300,
        width : 500,
        stretchX : false,
        centered : true,
        useTitles: false,
        listeners : {
            beforeshow : function() {
                if (this.items.length < 6) {
                    var one = {
                        name : '1',
                        title : '1',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        one.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(one);

                    var two = {
                        name : '2',
                        title : '2',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        two.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(two);

                    var three = {
                        name : '3',
                        title : '3',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        three.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(three);

                    var four = {
                        name : '4',
                        title : '4',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        four.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(four);

                    var five = {
                        name : '5',
                        title : '5',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        five.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(five);

                    var six = {
                        name : '6',
                        title : '6',
                        data : []
                    };
                    for ( var i = 0; i < 10; i++) {
                        six.data[i] = {
                            text : i,
                            value : i
                        };
                    }
                    picker.add(six);
                    picker.doLayout();
                }
                var mileage = Ext.getCmp('Mileage').getValue();
                mileage = Ext.util.Format.leftPad(mileage, 6, '0');
                this.setValue({1:mileage.substring(0,1),2:mileage.substring(1,2),3:mileage.substring(2,3),4:mileage.substring(3,4),5:mileage.substring(4,5),6:mileage.substring(5,6)});
            },
            beforehide : function() {
                var mileage = '';
                Ext.iterate(this.getValue(), function(key, value) {
                    mileage += value;
                })
                Ext.getCmp('Mileage').setValue(mileage);
            }
        }
    });
    
    page = new Ext.form.FormPanel( {
        scroll : 'vertical',
        style : 'background:#F9F9F9',
        items : [ {
            xtype : 'fieldset',
            id : 'page',
            title : 'General and technical information',
            //instructions: 'Please enter the information above.',
            items : [ {
                xtype : 'numberfield',
                name : 'car_mileage',
                label : 'Mileage',
                id : 'Mileage',
                listeners : {
                    focus : function(field) {
                        field.fieldEl.dom.blur();
                        picker.show(field);
                    },
                    afterrender : function(c) {
                        c.fieldEl.dom.readOnly = true;
                    }
                }
            }]
        } ]
    });
})(); 

[greenFeather]

now I understand how to get a picker in a form.

[umairabbas]

{ xtype: 'selectfield', usePicker: true, displayField: 'text', valueField: 'value', options: [ { text: 'Choose Dosage', value: 'default' }, ], defaultPhonePickerConfig : { listeners: { change: function(thePicker, newValue, oldValue) { //check if custom variable has been set to false if (newValue.slotsNumeric != null && newValue.slotsDecimal != null) { var total = newValue.slotsNumeric + newValue.slotsDecimal; // set the select field to show the correct selected value!! var DecimalPicker = Ext.ComponentQuery.query('selectfield')[0]; DecimalPicker.setOptions({ text: total, value: total }); } }, }, useTitles: true, hideOnMaskTap: true, slots: [ { name : 'slotsNumeric', title : 'Numeric', align: 'center', data : [ {text: '0', value: 0}, {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}, ] }, { name : 'slotsDecimal', title : 'Decimal', align: 'center', data : [ {text: '.0', value: .0}, {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}, ] } ] } }