Hello ExtJS community,
I'm new to ExtJS, and I'm trying to get my first app jump started. It's a simple Grails app that uses Ext for the layout. I'll fill in the Ext UI components once I get the layout to render. For the record, I'm using Grails 1.2.1 and ExtJS 3.1.1. I've been using the Grails tutorial for ExtJS as a starting point.
I think Ext is loading because I tried the alert(Ext) trick and I see "object Object" returned. Can someone help me identify why the app is not running and just the raw divs are displaying?
Here is my application.js
Code:
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif'
Appliction = function() {
this.layoutDecorator = null;
this.init = function () {
// Master layout
layout = new Ext.BorderLayout('container', {
north: {initialSize: 50},
center: {},
south: {initialSize: 30}
});
// Header
headerInnerLayout = new Ext.BorderLayout('header', {
north: {margins: {top: 5, left: 5, right: 5, bottom: 5}},
center: {margins: {top: 5, left: 5, right: 5, bottom: 5}}
});
// Included content (body)
contentInnerLayout = new Ext.BorderLayout('content', {
center: {}
});
// Footer
footerInnerLayout = new Ext.BorderLayout('footer', {
center: {margins: {top: 5, left: 5, right: 5, bottom: 5}}
});
layout.beginUpdate();
headerInnerLayout.add('north', new Ext.ContentPanel('banner', {fitToFrame: true}));
headerInnerLayout.add('center', new Ext.ContentPanel('menu', {fitToFrame: true}));
contentInnerLayout.add('center', this.getContentInnerPanel());
footerInnerLayout.add('center', new Ext.ContentPanel('status', {fitToFrame: true}));
layout.add('north', new Ext.NestedLayoutPanel(headerInnerLayout, {fitToFrame: true}));
layout.add('center', new Ext.NestedLayoutPanel(contentInnerLayout));
layout.add('south', new Ext.NestedLayoutPanel(footerInnerLayout, {fitToFrame: true}));
layout.endUpdate();
}
this.getContentInnerPanel = function() {
if (this.layoutDecorator) {
var includeLayout = new Ext.BorderLayout('include');
this.layoutDecorator(includeLayout);
return new Ext.NestedLayoutPanel(includeLayout, {fitToFrame:true});
}
else {
return new Ext.ContentPanel('include', {fitToFrame:true});
}
}
}
app = new Application();
Ext.onReady(app.init);
Here is the grails layout main.gsp:
Code:
<html>
<head>
<title><g:layoutTitle default="Grails" /></title>
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext/resources/css/ext-all.css')}" />
<link rel="stylesheet" href="${createLinkTo(dir:'js',file:'ext/resources/css/xtheme-slate.css')}" />
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext/adapter/ext/ext-base.js')}" />
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'ext/ext-all.js')}" />
<script type="text/javascript" src="${createLinkTo(dir:'js',file:'application.js')}" />
<g:layoutHead />
</head>
<body>
<div id="container">
<div id="header">
<div id="banner" style="background-color: red;">LOGO BANNER</div>
<div id="menu" style="background-color: blue;">MENU</div>
</div>
<div id="content">
<div id="include">
<g:layoutBody />
</div>
</div>
<div id="footer">
<div id="status" style="background-color: green;">STATUS</div>
</div>
</div>
</body>
</html>
And here is the index.gsp page:
Code:
<html>
<head>
<meta name="layout" content="main" />
<title>DVG4.0</title>
<script type="text/javascript" charset="utf-8">
app.layoutDecorator = function(layout) {
layout.addRegion('west', {initialSize: 355, margins: {top: 10, left: 10, right: 5, bottom: 10}});
layout.add('west', new Ext.ContentPanel('west-div', {fitToFrame:true}));
layout.addRegion('center', {margins: {top: 10, left: 5, right: 10, bottom: 10}});
layout.add('center', new Ext.ContentPanel('center-div', {fitToFrame:true}));
};
</script>
</head>
<body>
<div id="west-div" style="background-color: orange;">WEST</div>
<div id="center-div" style="background-color: purple;">CENTER</div>
</body>
</html>
And lastly, here is a screenshot of the output:
Please help with first ExtJS + Grails app
Reply With Quote
