PDA

View Full Version : new to ext, need some help



justinbezanson
22 Oct 2007, 8:16 AM
I am trying to setup a simple layout and keep getting the below error. What am I doing wrong?


l.fireFn has no properties
http://localhost/testing/ext/ext/ext-all-debug.js
Line 1363

My code is as follows


<html>
<head>
<title>Simple Layout</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../ext/adapter/yui/ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript" src="layout.js"></script>
</head>
<body>
<div id="header"></div>
<div id="navigation"></div>
<div id="content">
<div id="contentTabs"></div>
<div>

</div>
</div>
</body>
</html>



layout = function() {
var headerPanel, navigationPanel, contentPanel;
return {
init: function() {
var mainLayout = new Ext.BorderLayout(document.body, {
header: { split: true, initialSize: 50 },
navigation: { split: true, initialSize: 50 },
content: { split: true, initialSize: 100 }
});
mainLayout.beginUpdate();
mainLayout.add('header', headerPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));
mainLayout.add('navigation', navigationPanel = new Ext.ContentPanel('navigation', { fitToFrame: true, closable: false }));
mainLayout.add('content', contentPanel = new Ext.ContentPanel('content', { fitToFrame: true, closable: false }));
mainLayout.endUpdate();
headerPanel.setContent('This panel will be used for a header');
navigationPanel.setContent('navigation');
contentPanel.setContent('Content');
}
};
};
Ext.EventManager.onDocumentReady(layout.init, layout, true);

JeffHowden
22 Oct 2007, 8:21 AM
Purely a guess, but have you tried adding () at the end of your function declaration?


layout = function() {
var headerPanel, navigationPanel, contentPanel;
return {
init: function() {
var mainLayout = new Ext.BorderLayout(document.body, {
header: { split: true, initialSize: 50 },
navigation: { split: true, initialSize: 50 },
content: { split: true, initialSize: 100 }
});
mainLayout.beginUpdate();
mainLayout.add('header', headerPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));
mainLayout.add('navigation', navigationPanel = new Ext.ContentPanel('navigation', { fitToFrame: true, closable: false }));
mainLayout.add('content', contentPanel = new Ext.ContentPanel('content', { fitToFrame: true, closable: false }));
mainLayout.endUpdate();
headerPanel.setContent('This panel will be used for a header');
navigationPanel.setContent('navigation');
contentPanel.setContent('Content');
}
};
}();
Ext.EventManager.onDocumentReady(layout.init, layout, true);

justinbezanson
22 Oct 2007, 8:34 AM
I copied and modified the code form the layout tutorial on the Ext site. It didn't add the (). Also I assume the EventManager is supposed to take care of that onDocumentReady???

EDIT: Oops sorry the tutorial did have the (). Got a new error now. I;ll see if I can work threw it. Thanks

justinbezanson
22 Oct 2007, 8:47 AM
Well thanks for the suggestion it fixed that error but now I have another problem. Witht eh code below I keep getting the following error. Any ideas?


this.regions[target] has no properties
http://localhost/testing/ext/ext/ext-all-debug.js
Line 24792


layout = function() {
var headerPanel, navigationPanel, contentPanel;
return {
init: function() {
var mainLayout = new Ext.BorderLayout(document.body, {
header: { split: true, initialSize: 50 },
navigation: { split: true, initialSize: 50 },
content: { split: true, initialSize: 100 }
});
mainLayout.beginUpdate();
mainLayout.add('header', headerPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));
mainLayout.add('navigation', navigationPanel = new Ext.ContentPanel('navigation', { fitToFrame: true, closable: false }));
mainLayout.add('content', contentPanel = new Ext.ContentPanel('content', { fitToFrame: true, closable: false }));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(layout.init, layout, true);

EDIT: It appears to be the line below that is throwing the error. If I comment out the 3 lines that add ContentPanels to the layout I get no errors.


mainLayout.add('header', headerPanel = new Ext.ContentPanel('header', { fitToFrame: true, closable: false }));

Animal
22 Oct 2007, 11:17 AM
The regions of a BorderLayour are called "north", "east", "west", "south" and "center". Use those not "header", or whatever you invent!

justinbezanson
22 Oct 2007, 11:50 AM
ok that makes sense. Sorry this is the first I have used Ext.

thanks

Animal
22 Oct 2007, 1:34 PM
If this is the first time you have used Ext, I'd advise you to go straight to version 2. Available on the download page. No point learning one way of doing a page layout, and then another.