1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    25
    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
    9,011
    Answers
    668
    Vote Rating
    460
    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