[4.x] Ext.ux.Bootstrap

[kryo]

This is a new component I put together, which allows you to modularize your application by using bootstraps. I couldn't find a built-in way of loading javascript and/or css on the fly, so I put this together. I've seen a few other extensions out there, but nothing geared for ExtJS 4 or that allowed dynamic css loading.

Here is a simple example of what a bootstrap looks like, it should give you an idea of what can be done with it.

Ext.create( 'Ext.Bootstrap', {
    js: [
      'js/some-script-1.js',
      'js/some-script-2.js'
    ],
    css: [
      'css/some-script-1.css',
      'css/some-script-2.css'
    ],
    init: function(){
        // here goes code to be executed after the above scripts are loaded.
    }
}); 

Example, and documentation is included in the downloadable zip file. Online demo is available here. Feel free to comment if you have any questions or suggestions.

Note, you may have issues running the demo example directly without a web server. This is because Javascript (js/example.js) is loaded by Ext.Ajax, and the browser tries to access it by it's URL form (file:///path/to/js/example.js) which it not allowed because of XSS. This is a security feature of most recent browsers. (Any fix for that?)

News:

• 06.01.2011 - Created 1.0 release - Enables script caching and is tested & bundled with ExtJs 4.0.1 minified.
• 05.15.2011 - Updated 0.1rc tarball. Another bug found, js and css configs should be array by default, not null.
• 05.14.2011 - Updated 0.1rc tarball. Encountered a big bug when multiple bootstraps are used at the same time. Asynchronous javascript requests were leaking between bootstrap instances. This is now resolved.
• 05.14.2011 - Updated 0.1rc tarball. Encountered a bug with event listeners assigned from configuration. This is now resolved.

[harrydeluxe]

Thanks for sharing!

[kryo]

Please note, I've just updated the Tarball. I think this version is stable, feel free to give it a whirl!

Btw, sorry for all the updates and any confusion it may have brought.. I built this Bootstrap kind of quickly (and very late at night). After some incubation and suggestions from users, i'll promote this from release candidate to an official version.

[SMMJ_Dev]

Thank you, very nice!

[kryo]

Just released a new version, which enables script caching by default. Each javascript added can be an object or string. If object, parameters are passed to Ext.Ajax.request(), so you can have disableCaching: true and strictly disable caching for that script alone.

[Lobos]

Can this be invoked on the fly - ie say if I loaded like a "home" UI and that had a button to then load another UI and such could I invoke this in the buttons handler and it would load the JS and CSS?

Thanks!

[kryo]

Yep, you can do this. There are several ways to trigger the bootstrap to run. By default, it will run as soon as you create it. If you pass the configuration 'autoRun:false' it will not run when created, instead you'll need to run it manually, by calling the public run() method.

Prior to running, you can add all the JS/CSS required for the rest of your bootstrap to run (this can be done both in config, and "programmatically"). By the "rest of your bootstrap" I mean whatever listener(s) you've added to the 'ready' event, or handler method you've defined for the 'init' config.

[Dumbledore]

the IE has a 31 style-tags limitation. The only solution for this is to use one style-tag with max. 31 @imports ...

Perhaps you can add this to your loading logic?