1. #1
    Sencha User kryo's Avatar
    Join Date
    Jan 2010
    Location
    Costa Rica
    Posts
    34
    Vote Rating
    0
    kryo is on a distinguished road

      0  

    Lightbulb [4.x] Ext.ux.Bootstrap

    [4.x] Ext.ux.Bootstrap


    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.

    PHP Code:
    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.
    Attached Files
    Last edited by kryo; 1 Jun 2011 at 2:54 PM. Reason: Updated tarball and demo.. Another bug found, js and css configs should be array by default, not null.
    --
    Hans Doller
    hans@w3forge.org
    Senior Web Developer & Consultant

    Contributed Plugins: Ext.date.RangeField, Ext.money.Exchange, Ext.locale.Format, Ext.ux.Bootstrap

  2. #2
    Sencha Premium Member harrydeluxe's Avatar
    Join Date
    Jul 2007
    Location
    N├╝rnberg, Germany
    Posts
    78
    Vote Rating
    29
    harrydeluxe has a spectacular aura about harrydeluxe has a spectacular aura about

      0  

    Default


    Thanks for sharing!
    DELACAP | Github
    "don't code today what you can't debug tomorrow"

  3. #3
    Sencha User kryo's Avatar
    Join Date
    Jan 2010
    Location
    Costa Rica
    Posts
    34
    Vote Rating
    0
    kryo is on a distinguished road

      0  

    Default


    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.
    --
    Hans Doller
    hans@w3forge.org
    Senior Web Developer & Consultant

    Contributed Plugins: Ext.date.RangeField, Ext.money.Exchange, Ext.locale.Format, Ext.ux.Bootstrap

  4. #4
    Ext JS Premium Member SMMJ_Dev's Avatar
    Join Date
    Aug 2009
    Location
    St. Louis, MO
    Posts
    88
    Vote Rating
    0
    SMMJ_Dev will become famous soon enough

      0  

    Default


    Thank you, very nice!
    ExtJS 4.0 - Ext.ux.grid.FooterSummary (Coming Soon)
    ExtJS 4.0 - Ext.ux.form.field.IPhoneSwitch (Coming Soon)
    ExtJS 4.0 - Ext.ux.grid.HeaderFilter
    (Updates Coming Soon)
    ExtJS 4.0 - Ext.ux.menu.DynamicMenu

    ExtJS 4.0 - Ext.ux.form.field.ClearableCombo
    ExtJS 4.0 - Ext.ux.form.field.FormPanelEditor
    ExtJS 4.0 - Grouping Extra Features (Overrides) (Updates Coming Soon)

  5. #5
    Sencha User kryo's Avatar
    Join Date
    Jan 2010
    Location
    Costa Rica
    Posts
    34
    Vote Rating
    0
    kryo is on a distinguished road

      0  

    Default 1.0 - Stable Release

    1.0 - Stable Release


    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.
    --
    Hans Doller
    hans@w3forge.org
    Senior Web Developer & Consultant

    Contributed Plugins: Ext.date.RangeField, Ext.money.Exchange, Ext.locale.Format, Ext.ux.Bootstrap

  6. #6
    Sencha User Lobos's Avatar
    Join Date
    Oct 2007
    Location
    Sao Paulo, Brazil
    Posts
    461
    Vote Rating
    -1
    Lobos is an unknown quantity at this point

      0  

    Default


    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!

  7. #7
    Sencha User kryo's Avatar
    Join Date
    Jan 2010
    Location
    Costa Rica
    Posts
    34
    Vote Rating
    0
    kryo is on a distinguished road

      0  

    Default


    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.
    --
    Hans Doller
    hans@w3forge.org
    Senior Web Developer & Consultant

    Contributed Plugins: Ext.date.RangeField, Ext.money.Exchange, Ext.locale.Format, Ext.ux.Bootstrap

  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    686
    Vote Rating
    22
    Dumbledore will become famous soon enough Dumbledore will become famous soon enough

      0  

    Default


    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?

Similar Threads

  1. bootstrap and or ext-all
    By michael melsen in forum Ext: Discussion
    Replies: 12
    Last Post: 7 Sep 2014, 12:50 PM
  2. Bug in bootstrap
    By oniram88 in forum Ext:Bugs
    Replies: 2
    Last Post: 23 May 2011, 8:24 PM
  3. Versioning bootstrap.js and browser cache
    By wizkid in forum Ext: Discussion
    Replies: 2
    Last Post: 9 Apr 2011, 9:47 AM
  4. [CLOSED]No Bootstrap?
    By sg707 in forum Ext:Bugs
    Replies: 1
    Last Post: 16 Feb 2011, 4:01 PM
  5. Ext-Core to Bootstrap ExtJS
    By Daemonz80 in forum Ext: Q&A
    Replies: 2
    Last Post: 6 Apr 2010, 10:36 AM

Thread Participants: 4