Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

  1. #1
    Ext Premium Member
    Join Date
    Mar 2008
    Posts
    4
    Vote Rating
    0
    gayati.sa is on a distinguished road

      0  

    Arrow Sencha Touch Custom Picker Form Field

    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'},
    			]
    		}]
    	}]
    }

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Posts
    2
    Vote Rating
    0
    Jepse is on a distinguished road

      0  

    Default


    Wonderfull! Did you get the useTitles option working?

  3. #3
    Ext Premium Member
    Join Date
    Mar 2008
    Posts
    4
    Vote Rating
    0
    gayati.sa is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Oct 2010
    Posts
    2
    Vote Rating
    0
    Jepse is on a distinguished road

      0  

    Default


    Sound good. I found this thread, with a similar solution: http://www.sencha.com/forum/showthre...tles-bug/page3

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

  5. #5
    Ext Premium Member
    Join Date
    Mar 2008
    Posts
    4
    Vote Rating
    0
    gayati.sa is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    15
    siebmanb will become famous soon enough

      0  

    Default


    @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

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Posts
    5
    Vote Rating
    0
    cclark is on a distinguished road

      0  

    Default Update

    Update


    Is there an updated version of this for the latest version of ST?

  8. #8
    Sencha User
    Join Date
    Jan 2014
    Posts
    2
    Vote Rating
    0
    socca1157 is on a distinguished road

      0  

    Default Update

    Update


    I would love to solve this for Sencha 2!