CODEWITHSUNDEEP
javascriptextjsmodelstore
justmyfreak
justmyfreak

Reputation: 1270

Extjs Not Showing data from store

I`m learning Extjs and trying to follow this tutorial http://www.sencha.com/learn/the-mvc-application-architecture/ Everything went well.. But when I continue to 'Creating a Model and a Store' and do as written in tutorial then run it. It give error : Uncaught TypeError: Cannot read property 'items' of undefined Is there is something I missed up? Thank you

/app/controller/User.js

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'],
    models: ['User'],
    views: [
        'user.List',
        'user.Edit'],
    init: function () {
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            },
            'userlist': {
                itemdblclick: this.editUser
            }
        });
    },

    editUser: function (grid, record) {
        var view = Ext.widget('useredit');

        view.down('form').loadRecord(record);
    },
    onPanelRendered: function () {
        console.log('panel rendered');
    }
})

/app/model/User.js

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['name', 'email']
});

/app/store/Users.js

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',

    data: [
        {name: 'Ed',    email: '[email protected]'},
        {name: 'Tommy', email: '[email protected]'}
    ]
});

/app/view/user/Edit.js

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.useredit',

    title : 'Edit User',
    layout: 'fit',
    autoShow: true,

    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Name'
                    },
                    {
                        xtype: 'textfield',
                        name : 'email',
                        fieldLabel: 'Email'
                    }
                ]
            }
        ];

        this.buttons = [
            {
                text: 'Save',
                action: 'save'
            },
            {
                text: 'Cancel',
                scope: this,
                handler: this.close
            }
        ];

        this.callParent(arguments);
    }
});

/app/view/user/List.js

Ext.define('AM.view.user.List',{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    store: 'Users',
    title: 'All users',

});

/myapp.js

Ext.application({
    name: 'AM',

    controllers : ['Users'],
    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'userlist',
                }
            ]
        });
    }
});

/index.html

<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
        <script type="text/javascript" src="extjs/ext-debug.js"></script>
        <script type="text/javascript" src="myapp.js"></script>
    </head>
    <body>
        Loading apps.........
    </body>
</html>

Extjs library is located at /extjs

Upvotes: 3

Views: 6576

Answers (2)

dougajmcdonald
dougajmcdonald

Reputation: 20057

Just as a syntax based comment, you have an extra comma after 'userlist' in your myapp.js file and also after 'All Users' in your List.js file.

Also, in the comments on that tutorial there is reference to a similar issue where the resolution was to:

define the ‘columns’ property for the ‘List’ view

Try adding this to your list:

columns: [
    {header: 'Name',  dataIndex: 'name'},
    {header: 'Email', dataIndex: 'email'}
]

Upvotes: 4

Gajahlemu
Gajahlemu

Reputation: 1263

Okay look like that you want to try the sencha mvc example @ examples/app/simple This example have a bug because the need to explicit load of Ext.container.Viewport on application launch

launch: function() {
        Ext.create('Ext.container.Viewport', { //this line do explicit load on Viewport class

So to solve this you need an extra line on your myapp.js at the first line

Ext.Loader.setConfig({enabled:true}); //need to enable dynamically load the Ext.container.Viewport
Ext.application({
    name: 'AM',

    //paths direct to the Ext src path folder i.e given here if accessed from http://localhost/ext/examples/app/simple/simple.html
    paths: {
        'Ext': '../../../src/' 
    },
    controllers: [
        'Users'
    ],
....

Upvotes: 0

Related Questions