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
    16,828
    Vote Rating
    609
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi