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