1. #1
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
    gskluzacek is on a distinguished road

      1  

    Default Question: How to use Ext.ux.StatusBar in Sencha Architect project?

    Question: How to use Ext.ux.StatusBar in Sencha Architect project?


    In my Sencha Architect project I'm trying to add a Ext.ux.StatusBar to the bottom of a panel. I'm trying to do this by adding a launch function to my Application. But I'm getting an error. Does anyone know the correct way to do this in Sencha Architect?

    Here is the code from app.js
    Code:
    Ext.Loader.setConfig({    enabled: true
    });
    
    
    Ext.application({
        models: [
            ...
        ],
        stores: [
            ...
        ],
        views: [
            'WmtViewport'
        ],
        autoCreateViewport: true,
        name: 'WheresMyTransaction',
    
    
        launch: function() {
            Ext.Loader.setPath('Ext.ux', 'http://extjs.cachefly.net/ext-4.0.7-commercial/examples/ux');
    
    
            Ext.require([
            'Ext.ux.statusbar.StatusBar'
            ]);
    
    
            Ext.getCmp('SearchToolbar').up('#WmtViewport').down('#TransDetailTabPanel').addDocked(new Ext.ux.StatusBar({id: 'my-status', text: 'Ready to go', dock: 'bottom'}));
        }
    
    
    });
    But in the console I get the following error from the attempt to create the status bar:

    Uncaught TypeError: undefined is not a function app.js:60
    Ext.application.launch app.js:60
    Ext.define.onBeforeLaunch ext-all-debug.js:39716
    (anonymous function) ext-all-debug.js:39695
    isEvent ext-all-debug.js:10516
    fire ext-all-debug.js:10658
    Ext.EventManager.onDocumentReady ext-all-debug.js:10780
    Ext.Loader.onReady.fn ext-all-debug.js:4816
    Ext.Loader.triggerReady ext-all-debug.js:4797
    Ext.Loader.refreshQueue ext-all-debug.js:4473
    Ext.Loader.refreshQueue ext-all-debug.js:4504
    Ext.Loader.refreshQueue ext-all-debug.js:4504
    Ext.Loader.onFileLoaded ext-all-debug.js:4747
    (anonymous function) ext-all-debug.js:1548
    Ext.Loader.injectScriptElement.onLoadFn ext-all-debug.js:4519

    The problem I think is that the code to create a new instance of the status bar class executes before the StatusBar.js file is loaded because its all happening synchronously...

    However if I execute the offending line of code in the console after the application has finished loading, it works just fine?!

    Code:
    Ext.getCmp('SearchToolbar').up('#WmtViewport').down('#TransDetailTabPanel').addDocked(new Ext.ux.StatusBar({id: 'my-status', text: 'Ready to go', dock: 'bottom'}))
    Does anyone know the correct way to do the above in Sencha Architect? Also, it it possible to 'add' the Ext.ux.statusbar.StatusBar component to Architect so that one can drag and drop it onto the canvas like any other Ext JS component?

    Thanks,
    --Greg
    -- Once you go Mac, you never go back!

  2. #2
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Hi,

    in the SA example feed-viewer it is done in this way:

    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'Ext.ux': 'ux/'
        }
    });
    
    Ext.application({
    
    ...
    
        launch: function() {
            Ext.syncRequire([
            'Ext.ux.PreviewPlugin'
            ]);
        }
    
    });
    Please let us know if it works in this way
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  3. #3
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
    gskluzacek is on a distinguished road

      0  

    Default Answer: How to use Ext.ux.StatusBar in Sencha Architect project

    Answer: How to use Ext.ux.StatusBar in Sencha Architect project


    msinn,

    Thanks for the solution, it worked! ... Kind of

    While what I eventually came up does work, I would appreciate if any could offer a better or more elegant solution. Such as how to get Sencha Architect to configure the application object's requires property...

    While what you suggested didn't work, it made me read the API documentation to see what the difference was between Ext.syncRequire and Ext.require. I think syncRquire didn't work for me cause I'm loading the framework from Cachefly and not locally. Here's the error I got:

    XMLHttpRequest cannot load http://extjs.cachefly.net/ext-4.0.7-...=1338562420842. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

    But when reading the API documentation, I did notice (funny how that works) that there is a callback function for both Ext.syncRequire and Ext.require. So I put my code that creates my status bar in the call back and that did work.

    Here's the working code from my solution from the app.js file:
    Code:
    Ext.Loader.setConfig({    enabled: true,
        paths: {
            'Ext.ux': 'http://extjs.cachefly.net/ext-4.0.7-commercial/examples/ux'
        }
    });
    
    Ext.application({
        models: [
            ...
        ],
        stores: [
            ...
        ],
        views: [
            'WmtViewport'
        ],
        autoCreateViewport: true,
        name: 'WheresMyTransaction',
    
        launch: function() {
            Ext.syncRequire([
                'Ext.ux.statusbar.StatusBar'
            ], function() {
                Ext.getCmp('SearchToolbar').up('#WmtViewport').down('#TransDetailTabPanel').addDocked(new Ext.ux.statusbar.StatusBar({id: 'my-status', text: 'Ready to go', dock: 'bottom'}));
            });
    
        }
     });
    Thanks again & Regards,
    --Greg
    -- Once you go Mac, you never go back!

  4. #4
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Thank you for your shared solution. I'll use it soon too
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  5. #5
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,329
    Vote Rating
    211
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      4  

    Default


    The easy way is to wrap status bar inside container.

    I'm attaching an example project on how to accomplish that.

    Regards.

    UPDATE:
    1. Note that container has an override to include statusbar.
    2. itemId is really not needed and getStatusBar() method is just an example on how to add custom methods.
    Attached Files
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  6. #6
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
    gskluzacek is on a distinguished road

      0  

    Default Thanks for that sample project

    Thanks for that sample project


    Thanks for the sample project ssamayoa.

    Until I fully understand what you did above and how to replicate it myself, I will, in the short term, stick to using the solution I've documented below. But I definitely agree, you're method where you statically configure the status bar in Architect is much better than doing it dynamically at run time.

    I really wish Sencha would come up with a method to add external components to the Toolbox pallet so one could simply add the component to the Toolbox and then drag and drop them to the Canvas (hint, hint Sencha).

    I'm not quite that advanced yet and I would love if you could reply back with the steps you used in Architect to you created the container that wraps the status bar inside of it, how you made the container a separate class then and how you then overrode the container to include the status bar... All very confusing to a Ext JS / Architect beginner user...

    Note: upgrading to the latest Build of version 2.0.0. of Architect solved the last piece of my problem, not being able to set the requires property of the Application node.

    So the key pieces of the solution below are:
    1. setting the path on the loader config (have to add that by clicking on the + button on the Application node's Loader Config property) to point Ext.ux to http://extjs.cachefly.net/ext-4.0.7-...al/examples/ux
    2. setting the requires property on the Application node to Ext.ux.statusbar.StatusBar
    3. using the Application's Launch function to dynamically create a new instance of the StatusBar and add it to my view's docked items.
    Code:
    Ext.Loader.setConfig({    enabled: true,
        paths: {
            'Ext.ux': 'http://extjs.cachefly.net/ext-4.0.7-commercial/examples/ux'
        }
    });
    
    
    Ext.application({
        requires: [
            'Ext.ux.statusbar.StatusBar'
        ],
    
    
        models: [
            ...
        ],
        stores: [
            ...
        ],
        views: [
            'WmtViewport'
        ],
        autoCreateViewport: true,
        name: 'WheresMyTransaction',
    
    
        launch: function() {
            Ext.getCmp('SearchToolbar').up('#SearchResultsGrid').addDocked(
            new Ext.ux.statusbar.StatusBar({
                id: 'SearchStatusBar',
                defaultText: 'Ready',
                defaultIconCls: 'x-status-valid',
                busyText: 'Please wait...',
                emptyText: 'One moment please...',
            dock: 'bottom'})
            );
        }
    
    
    });
    Regards,
    --Greg
    -- Once you go Mac, you never go back!

  7. #7
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
    gskluzacek is on a distinguished road

      0  

    Default see this other thread too...

    -- Once you go Mac, you never go back!

  8. #8
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,329
    Vote Rating
    211
    ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold ssamayoa is a splendid one to behold

      3  

    Default


    I'm not quite that advanced yet and I would love if you could reply back with the steps you used in Architect to you created the container that wraps the status bar inside of it, how you made the


    Is very simple:

    1. Drop a Container in the canvas, NOT inside another container (window, panel, etc.)
    2. Set the properties:

    userClassName: StatusBarCnt
    userAlias: statusbarcnt
    layout: fit
    height: 27
    width: <nothing, clean it with the "x">

    3. Select code view then click on "Create Override"
    4. Add initComponent method:

    Code:
            initComponent: function() {
                var me = this;
        
                Ext.applyIf(me, {
                    items: [{xtype: 'statusbar', itemId: '_statusbar_'}]
                });
        
                this.callParent(arguments);
            }

    5. Drop a window in the canvas.
    6. In the project explorer, drag StatusBarCnt to the new window and when SA asks what action you want click on "link".
    7. Set "dock" of the status bar container in the window to "bottom".

    Thats it.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  9. #9
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
    gskluzacek is on a distinguished road

      1  

    Default


    Totally cool thanks I'll give that a try!
    -- Once you go Mac, you never go back!

  10. #10
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    86
    Vote Rating
    5
    HyGy is on a distinguished road

      0  

    Default


    Hi!

    Is there an example too how can I do this with 2 architect projects?

    I mean create one main component.xds, and create a subComponent1.xds in subcomponent1 there is a window, can I somehow load it under the main project?

    thanks!
    HyGy