Ext.extend fails within Air? [Archive]

Phunky

1 May 2008, 2:57 AM

I'm having a play with ExtJS and Air and im trying to follow some of Saki's "Big Application (http://blog.extjs.eu/know-how/writing-a-big-application-in-ext/)" extend techniques but i seem to be failing.

I have a VERY simple application which has the following

Main.js

// Initialize the state provider
Ext.state.Manager.setProvider(new Ext.air.FileProvider({
file: 'tasks.state',
// if first time running
defaultState : {
mainWindow : {
width:780,
height:580,
x:10,
y:10
}
}
}));

Ext.onReady(function(){
Ext.QuickTips.init();

// maintain window state automatically
var win = new Ext.air.NativeWindow({
id: 'mainWindow',
instance: window.nativeWindow,
minimizeToTray: true,
trayIcon: 'ext-air/resources/icons/extlogo16.png',
trayTip: 'ACORNPartner',
trayMenu : [{
text: 'Open ACORNPartner',
handler: function(){
win.activate();
}
}, '-', {
text: 'Exit',
handler: function(){
air.NativeApplication.nativeApplication.exit();
}
}]
});

var menus = Ext.air.SystemMenu;

menus.add('File', ['-']);

menus.add('Find', [{
text: 'Partner'
}, {
text: 'Referral'
},{
text: 'Web Account'
}]);

menus.add('Help', [{
text: 'About',
handler: function(){
Ext.air.NativeWindowManager.getAboutWindow().activate();
}
}]);

var viewport = new Ext.Viewport({
layout: 'border',
items:[{
region: 'center',
title: 'Center',
html: 'Content'
},{
region: 'south',
title: 'South',
height: 250,
html: 'Content'
}, {xtype:'sidebar'}]
});

win.on('closing', function(){
Ext.air.NativeWindowManager.closeAll();
});

});

Main.html

<html>
<head>
<title>ACORNPartner.com [cPanel] Production Release</title>

<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="ext-air/resources/ext-air.css" />
<link rel="stylesheet" type="text/css" href="main.css" />

<script type="text/javascript" src="adobe/AIRAliases.js"></script>

<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>

<script type="text/javascript" src="ext-air/ext-air.js"></script>

<script type="text/javascript" src="js/application.layout.js"></script>
<script type="text/javascript" src="main.js"></script>

</head>
<body>
<span></span>
</body>
</html>

Application.layout.js

Application.sidebar = Ext.extend(Ext.Panel, {
border:false,
initComponent:function() {
Ext.apply(this, {
title: 'West',
width: 250,
html: 'Content',
region: 'west',
viewConfig:{forceFit:true},
tbar:['']
});

Application.sidebar.superclass.initComponent.apply(this, arguments);
}

});

Ext.reg('sidebar', Application.sidebar);

It would seem that my attempt at Extending Ext.Panel totally fails and will not load when i test run the application.

Can anyone see where im going wrong?!