CODEWITHSUNDEEP
extjs4
jm2
jm2

Reputation: 763

Defining View in ExtJS. "Uncaught TypeError: Cannot call method 'substring' of undefined"

I am trying to define a view but I am getting an error

Uncaught TypeError: Cannot call method 'substring' of undefined

/app/view/Sidebar.js

Ext.define('SimpleTodo.view.Sidebar', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.sidebar',
    config: {
        title: 'Projects & Todo Lists',
        tbar: [
            {
                xtype: 'button',
                text: 'Add Project'
            },
            {
                xtype: 'button',
                text: 'Add Todo List'
            }
        ],
        //store: Ext.data.StoreManager.lookup('projects'),
        html: 'Hello world',
        width: 200
    }
});

Then tried to use it in my app.js

Ext.application({
    name: 'SimpleTodo',
    views: [
        'Sidebar'
    ],
    appFolder: 'app',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: {
                type: 'hbox',
                pack: 'start',
                align: 'stretch'
            },
            items: [
                {
                    xtype: 'sidebar' //  <---- here
                },
                {
                    xtype: 'panel',
                    id: 'detailsView',
                    flex: 1,
                    layout: 'card',
                    items: [
                        {
                            xtype: 'panel',
                            id: 'todoDetails',
                            title: 'Todo Details'
                        },
                        {
                            xtype: 'panel',
                            id: 'addProject',
                            title: 'Add project',
                        }
                    ]
                }
            ]
        })
    }
});

What am I missing? Have I defined my views and used it correctly?

Upvotes: 0

Views: 7985

Answers (1)

XenoN
XenoN

Reputation: 995

Actually it must be like that: 

Ext.application({
        name: 'SimpleTodo',
        requires:[
         'SimpleTodo.view.Sidebar'
        ],
        appFolder: 'app',
        launch: function() {
          Ext.onReady(function(){
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'hbox',
                    pack: 'start',
                    align: 'stretch'
                },
                items: [
                    {
                        xtype: 'sidebar' //  <---- here
                    },
                    {
                        xtype: 'panel',
                        id: 'detailsView',
                        flex: 1,
                        layout: 'card',
                        items: [
                            {
                                xtype: 'panel',
                                id: 'todoDetails',
                                title: 'Todo Details'
                            },
                            {
                                xtype: 'panel',
                                id: 'addProject',
                                title: 'Add project',
                            }
                        ]
                    }
                ]
            })
        });
      }
    });

Upvotes: 1

Related Questions