1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    24
    Answers
    1
    Vote Rating
    0
    KnowledgeSeeker is on a distinguished road

      0  

    Default Unanswered: iPhoneSwitch plugin error.

    Unanswered: iPhoneSwitch plugin error.


    I am using the example given at http://www.sencha.com/forum/showthre...-iPhone-Switch to create a plugin to be used on ExtJS 4.1 application. Here is how I modified the given code to:
    Code:
    // create namespace for plugins
    Ext.namespace('Ext.ux.plugins');
    Ext.require('Ext.form.RadioGroup');
    /**
     * Ext.ux.plugins.iPhoneSwitch plugin for Ext.form.Radio
     *
     * @author   Chalres Himmer
     * @stardate January 25, 2010
     *
     * @class Ext.ux.plugins.IphoneSwitch
     * @extends Ext.form.RadioGroup
     */
    
    
    Ext.define('Ext.ux.plugins.iPhoneSwitch', {
        extend: 'Ext.form.RadioGroup',
        alias: 'widget.iphoneswitch',
        initComponent: function () {
    
    
            this.addEvents(
                'changed'
            );
    
    
            // private hard coded config
            var config = {
                items: [
                    { boxLabel: 'On', name: this.name + '-on', inputValue: true, hidden: true },
                    { boxLabel: 'Off', name: this.name + '-off', inputValue: false, hidden: true, checked: true }
                ]
            };
    
    
            //Ext.apply(this, config);
    
    
            // call parent initComponent
            Ext.ux.plugins.iPhoneSwitch.superclass.initComponent.call(this);
            this.callParent(config);
    
    
        }, // end of function initComponent
    
    
        onRender: function (ct, position) {
    
    
            Ext.ux.plugins.iPhoneSwitch.superclass.onRender.call(this, ct, position);
    
    
            var statusClass = (this.getValue().inputValue == 0) ? ' off' : 'on';
    
    
            this.switch = new Ext.Element(Ext.DomHelper.append(this.el, {
                tag: 'div',
                cls: 'x-iphone-switch' + statusClass,
                children: [{
                    tag: 'img',
                    src: 'images/iphone_switch_container.gif'
                }]
            }));
    
    
            // add class to label so we can target it using css
            this.switch.parent('div.x-form-element').prev('label').addClass('x-iphone-switch-label');
    
    
            // add listener
            this.switch.on('click', this.onClick, this, { delegate: 'img' });
        },
    
    
        onClick: function (e, t) {
            e.stopEvent();
    
    
            // change the value of the form
            this.setValue('toggle');
    
    
            // fire event
            this.fireEvent("afterchange", this, this.value);
        },
    
    
        /**
         * @param {string} val
         *
         * We are overriding the default behavior of the setValue method
         * so we can use the form's bulk setValues method and just pass in
         * either true, false, on, off, or toggle.
         */
        setValue: function (val) {
    
    
            // see if we are toggling the switch's state
            if (val === 'toggle') {
                val = (this.getValue().inputValue) ? false : true;
            }
                // if val is 'on', true, or 1 turn this on the switch
            else if ([1, 'true', true, 'on'].indexOf(val) !== -1) {
                val = true;
                console.log(this.switch);
            }
                // then we must be turning the switch off
            else if ([0, 'false', false, 'off'].indexOf(val) !== -1) {
                val = false;
                this.switch.removeClass('on').addClass('off');
            }
                // unrecongized value
            else {
                console.log('Unknown value for iPhoneSwitch: ' + val);
            }
    
    
            // set the internal radio button's value
            this.items.first().setValue(val);
    
    
            // animate image
            this.animateSwitch(val);
        },
    
    
        /**
         * @param {string} - Possible values are true or false
         *
         * This animates the switching of the switch use CSS3 animations
         */
        animateSwitch: function (status) {
    
    
            if (status) {
                this.switch.removeClass('off').addClass('on');
            } else {
                this.switch.removeClass('on').addClass('off');
            }
        }
    });
    
    
    // register xtype
    //Ext.reg('iphoneswitch', Ext.ux.plugins.iPhoneSwitch);
    
    
    // end of file
    And this is how I am using it on my view:
    Code:
    Ext.define('Dashboard.view.dashboard.ChartTL', {
        extend: 'Ext.panel.Panel',
        requires: ['Ext.ux.plugins.iPhoneSwitch'],
        alias: 'widget.chartTopLeft',
        layout: 'card',
        items: [    {
            xtype: 'iphoneswitch',
            fieldLabel: 'Video Thumbnails',
            name: 'videoThumbnailsEnabled'
        }]
    });
    I am getting the error "TypeError: this.switch.parent(...) is null" on the line:
    this.switch.parent('div.x-form-element').prev('label').addClass('x-iphone-switch-label');

    Can anyone point out what is the mistake or how to use this plugin?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,910
    Answers
    655
    Vote Rating
    443
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Side note, here is another UX if you cannot get that one to work: (ToggleSlide)
    https://github.com/harrydeluxe/extjs-ux
    http://www.sencha.com/forum/showthread.php?226679

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."