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

[gskluzacek]

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

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?!

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

[msinn]

Hi,

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

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

[gskluzacek]

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:

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

[msinn]

Thank you for your shared solution. I'll use it soon too

[ssamayoa]

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.

[gskluzacek]

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.

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

[gskluzacek]

http://www.sencha.com/forum/showthre...h-SA2&p=824309

[ssamayoa]

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:

        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.

[gskluzacek]

Totally cool thanks I'll give that a try!

[HyGy]

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