PDA

View Full Version : How do you create a StatusBar?



mpost
24 Sep 2012, 11:40 AM
So I'm pretty new to ExtJS and am trying to create a toolbar. It seems like this should be a simple task. I'm using ExtJS 4.1.1.

I have a skeleton HTML file:


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all-debug.css">
</head>
<body>
<script src="lib/extjs/ext-debug.js"></script>
<script src="app.js"></script>
</body>
</html>


with a simple app.js:


Ext.Loader.setConfig({
enabled:true
});


//Ext.Loader.setPath('Ext.ux', '../ux/');


Ext.application(
{
name:'TestApp',
appFolder:'app',
autoCreateViewport:true
});


and then I have an app/view/Viewport.js as follows:


Ext.define('TestApp.view.Viewport', {
extend:'Ext.Viewport',
requires:[
// 'Ext.ux.statusbar.StatusBar'
],
layout:'border',


initComponent:function ()
{
var me = this;


Ext.applyIf(me, {
items:[
{
xtype:'panel',
title:'Status Bar Test',
region:'center'
// ,
// bbar:{
// xtype:'statusbar',
// items:[
// {
// xtype:'tbtext',
// text:'some text'
// }
// ]
// }
}
]
});


me.callParent(arguments);
}
});


This just displays an empty panel. If I uncomment just the lines in Viewport.js, I get the following:
GET http://localhost:8081/test/lib/extjs/src/ux/statusbar/StatusBar.js?_dc=1348515241577 (http://localhost:8081/aperture-webclient/lib/extjs/src/ux/statusbar/StatusBar.js?_dc=1348515241577) 404 (Not Found)

If I also uncomment the line in app.js (as suggested by http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/statusbar/statusbar-demo.js), this changes to:

GET http://localhost:8081/ux//statusbar/StatusBar.js?_dc=1348515355144 404 (Not Found)

So how exactly are you supposed to create a StatusBar (or anything within the Ext.ux namespace for that matter)? There's simply no src/ux folder in the 4.1.1 distribution. There's an examples/ux folder, but surely you're not supposed to just copy that into the src folder. (What about theme support for the StatusBar?)

mitchellsimoens
26 Sep 2012, 7:31 AM
It seems the path to Ext.ux is incorrect, you will need to fix it so that when you require the class it can be resolved correctly.