PDA

View Full Version : iPhoneSwitch plugin error.



KnowledgeSeeker
28 Jan 2014, 5:57 AM
I am using the example given at http://www.sencha.com/forum/showthread.php?137574-iPhone-Switch to create a plugin to be used on ExtJS 4.1 application. Here is how I modified the given code to:

// 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:

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?

scottmartin
28 Jan 2014, 1:50 PM
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