1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    19
    Vote Rating
    0
    robot1125 is on a distinguished road

      0  

    Default Please help with first ExtJS + Grails app

    Please help with first ExtJS + Grails app


    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:


  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    That Ext code looks really, really old. Around Ext 1.x. I wouldn't use that as a starting point.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext User
    Join Date
    Jun 2010
    Posts
    6
    Vote Rating
    0
    cliffordh is on a distinguished road

      0  

    Default


    I keep coming across this thread while researching Ext and Grails... instead of saying you wouldn't use the above code as a starting point... can you provide a starting point?

Thread Participants: 2