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
    6
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar