1. #1
    Sencha User 123lal's Avatar
    Join Date
    Feb 2012
    Posts
    32
    Vote Rating
    0
    123lal is on a distinguished road

      0  

    Exclamation Viewport.js error in mvc extjs4

    Viewport.js error in mvc extjs4


    Hi am a new comer to ext js,

    i created two project/ application with extjs 4 using mvc architecture , but unfortunately i failed , i haven't get the out put as i expected here am pasting the two applications code somebody please help me to find the error,
    I tried a lot, i think both application have the same error, am referring a text book named Ext js 4 First Look, and the tutorials given by sencha .

    Application 1

    Structure

    -app
    ---controller
    -----Books.js
    ---view
    -----Emailpanel.js
    -----Panelcenter.js
    -----Phonepanel.js
    -----Viewport.js
    ---model
    -extjs
    -index.html
    -app.js


    index.html

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="app.js"></script>
    
    
    </head>
    
    <body>
    
    </body>
    </html>
    app.js
    Code:
    // JavaScript Document
    Ext.Loader.setConfig({enabled: true});
    
    Ext.application({
        name: 'Buks',
        
        appFolder: 'app',
        
        controllers: [
            'Books'
        ],
        autoCreateViewport: true
                    
    });
    app/controller/Books.js

    Code:
    Ext.define('Buks.controller.Books', {
        extend: 'Ext.app.Controller',
        
        views: [ 'Panelcenter','Emailpanel','Phonepanel' ],
     
    });
    app/view/Viewport.js

    Code:
    Ext.define('Buks.view.Viewport', {
        extend: 'Ext.container.Viewport',    
            
        requires: [
            'Buks.view.Panelcenter',
            'Buks.view.Emailpanel',
            'Buks.view.Phonepanel'
        ],
        
        
        initComponents: function () {
            Ext.apply (this, {
                items: [{
                            xtype: 'pcenter',
                            title:'center',
                            region: 'center'
                        },
                        {
                            xtype: 'empanel',
                            title:'south',
                            region: 'south',
                            height: 150
                        },
                        {
                           xtype: 'phPanel',
                           title: 'west',
                           region: 'east',
                           width: 150
                        }]
            });
        }
       
    });
    app/view/Panelcenter.js
    Code:
    // JavaScript Document
    Ext.define('Buks.view.Panelcenter' ,{
        extend: 'Ext.grid.Panel',
        alias : 'widget.pcenter',
    
        title : 'All Users',
    
        initComponent: function() {
            this.store = {
                fields: ['name', 'email','phone'],
                data  : [
                    { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
                       { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
                    
                ]
            };
    
            this.columns = [
                   { header: 'Name',  dataIndex: 'name' },
                { header: 'Email', dataIndex: 'email', flex: 1 },
                { header: 'Phone', dataIndex: 'phone' }
            ];
    
            this.callParent(arguments);
        }
    });

    This is all about the codes in application 1
    i have not get any display in the screen ,but in the Firebug i found that the additional js files (Viewport.js, Panelcenter.js,etc ) are loading

    and the second application i created a simple one that i found in the sencha forum , but in that example also i failed

    code for second application is given below
    Application2
    Structure
    -app
    ---model
    ---view
    -----Viewport.js
    ---controller
    -----Books.js
    -app.js
    -index.html

    index.html
    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript">
        Ext.Loader.setConfig ({enabled:true});
    </script>
    <script type="text/javascript" src="app.js"></script>
    
    
    </head>
    <body>
    </body>
    </html>
    app.js
    Code:
    Ext.application ({
        name: 'Buk',
        controllers: ['Books']
    });
    app/controller/Books.js
    Code:
    Ext.define('Buk.controller.Books', {
        extend: 'Ext.app.Controller',
       
    });
    app/view/Viewport.js
    Code:
    Ext.define ('Buk.view.Viewport' , {
        extend: 'Ext.container.Viewport' ,
        
        initComponents: function () {
            Ext.apply (this, {
                items: [{
                    region: 'center' ,
                    xtype: 'panel' ,
                    html: 'Hello World!'
                }]
            });
            this.callParent(arguments);
        }
    });
    Somebody please help me to find out the error in this code, I tried a lot before posting this in to this forum, i need your help and suggestions to continue with extjs4. am studing myself, i think i had done some error in the code please help me to correct the code

    Thanks in advance
    123lal

  2. #2
    Sencha User 123lal's Avatar
    Join Date
    Feb 2012
    Posts
    32
    Vote Rating
    0
    123lal is on a distinguished road

      0  

    Default


    Please help me. what is the error in the code ,

  3. #3
    Sencha User
    Join Date
    May 2010
    Location
    Kiev, Ukraine
    Posts
    134
    Vote Rating
    7
    khmurach is on a distinguished road

      0  

  4. #4
    Sencha User 123lal's Avatar
    Join Date
    Feb 2012
    Posts
    32
    Vote Rating
    0
    123lal is on a distinguished road

      0  

    Default


    @khmurach Thank you . i found the error with the help of you ,

    got the spelling mistake

    initComponents:

    and have to uncomment

    this.callParent(arguments);

    Thank you very much dear.

    Happy coding and Have a nice day

    123lal

  5. #5

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