PDA

View Full Version : Suggestion about Ext.AbstractComponent#plugins



Scott Murawski
2 Mar 2011, 10:57 PM
I like plugins. Even though you can make any Component plugable, it would be nice to be able to easily make any object pluggable. I think the problem with moving the initPlugin code into Observable is that it would slow down Observable - not all javascript objects which are Observable need to be pluggable.



// Move this into Observable?
if (me.plugins) {
me.plugins = [].concat(me.plugins);
for (i = 0, len = me.plugins.length; i < len; i++) {
me.plugins[i] = me.initPlugin(me.plugins[i]);
}
}
Here's an alternative approach. What are your thoughts about this?



// Encapsulates the plugin capabilities
Ext.define("Plugable", {
constructor : function() {
this.constructPlugins();
this.initObject(); // not sure if this is necessary, similar to Ext.AbstractComponent#initComponent
this.initPlugins();
},

initObject : Ext.emptyFn,

// same code as in the Ext.AbstractComponent constructor
constructPlugins : function() {
var me = this;

if ( me.plugins ) {
me.plugins = [].concat(me.plugins);
for (i = 0, len = me.plugins.length; i < len; i++) {
me.plugins[i] = me.constructPlugin(me.plugins[i]);
}
}
},

// same as Ext.AbstractComponent#constructPlugin
constructPlugin : function( plugin ) {
if ( plugin.ptype && (typeof plugin.init != "function") ) {
plugin.obj = this; // original code uses cmp for component, use obj here?
plugin = Ext.PluginMgr.create(plugin);
}
else if ( typeof plugin == "string" ) {
plugin = Ext.PluginMgr.create({
ptype : plugin,
obj : this // original code uses cmp for component, use obj here?
});
}

return plugin;
},

// same code as in the Ext.AbstractComponent constructor
initPlugins : function() {
var me = this;

if (me.plugins) {
me.plugins = [].concat(me.plugins);
for (i = 0, len = me.plugins.length; i < len; i++) {
me.plugins[i] = me.initPlugin(me.plugins[i]);
}
}
},

// same as Ext.AbstractComponent#initPlugin
initPlugin : function( plugin ) {
plugin.init(this);
return plugin;
}
});

// example of a plugin needing to be constructed
Ext.define("MyPlugin", {
alias : "plugin.my-plugin",
init : function( obj ) {
// I like the new $className feature, good stuff!
console.log(obj.$className + " MyPlugin constructor");
}
});

Ext.define("CanSing", {
plugins : [{ptype : "my-plugin"}], // constructed plugin
mixins : {
plugable : "Plugable" // using Plugable as a mixin
},
constructor : function () {
console.log("CanSing constructor");
this.mixins.plugable.constructor.call(this); // looks weird, maybe have plugable.constructAndInit()?
},
// called from the plugable constructor
initObject : function () {
console.log("CanSing initObject");
},
sing : function() {
console.log("I'm on the highway to hell...")
}
});

// The new class definitions are awesome!
Ext.define("Musician", {
extend : "Plugable", // use plugable as a base class
plugins : [{init : function () { console.log("Musician plugin.init"); }}], // object plugin

constructor : function () {
console.log("musician constructor");
this.callParent(); // nice, no longer need to hardcode the class name anymore!
},
// called via callParent() which is the plugable constructor which calls initObject()
initObject : function () {
console.log("Musician initObject");
},
});