ExtJS 4.2 & Architect 2.2 – Plugins

I’ve been liking Sencha’s Architect IDE more and more as it’s been maturing over time. In my last post I wrote about making custom plugins in ExtJS 4, but how do you go about using them through Architect?

First step would be to ensure the we have the plugin code; I accomplished this by adding a JS Resource:

Next step should be easy enough; I figured adding a custom “plugins” property with a value of “[“ux.fadeinplugin”]” on a given Panel would do the trick:

…however, while this does work when tested in browser, this causes Architect’s canvas to go blank, essentially rendering it useless. Upon further research, there are known bugs surrounding this, but no fix yet.

Read on for a workaround in Architect…

Turns out there’s a “processConfig” method that you can set:

This will let you write a custom method, like so:

    processThePanel: function(config) {
        config.plugins = ["ux.fadeinplugin"];
        return config;
    },

At this point, even though the underlying code that is generated is rather funky, you get a functional implementation without breaking Architect!