Расширение макета Extjs, вызывающее ошибку в ext-all.js

Question

Я пытаюсь выучить Extjs, и у меня сразу же возникает проблема. Мой HTML содержит ext-base.js и ext-all.js правильно включены. Затем в моем файле js есть следующее:

Ext.BLANK_IMAGE_URL = '<%= Url.Content("~/Content/ext/images/default/s.gif") %>';
Ext.ns('MyNamespace');

Ext.onReady(function() {
    alert("onReady() fired");
});

Пока все работает, ошибок нет и предупреждение выдается правильно. Затем я добавляю следующий код после onReady:

MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport({
    layout: 'border',
    items: [
        new Ext.BoxComponent({
            region: 'north',
            height: 32,
            autoEl: {
                tag: 'div',
                html: '<p>North</p>'
            }
        })
    ]
}));

Это вызывает следующую ошибку JavaScript в Chrome:

Uncaught TypeError: Object #<an Object> has no method 'addEvents'       ext-all.js:7
Ext.Component       ext-all.js:7
Ext.apply.extend.K       ext-base.js:7
Ext.apply.extend.K       ext-base.js:7
Ext.apply.extend.K       ext-base.js:7
(anonymous function)       MyApp.js:13 (pointing to the Ext.Extend line)

Если я возьму код Viewport и вставлю его непосредственно в функцию OnReady, то он (как показано ниже)

Ext.onReady(function () {
    var bl = new Ext.Viewport({
        layout: 'border',
        items: [
        new Ext.BoxComponent({
            region: 'north',
            height: 32,
            autoEl: {
                tag: 'div',
                html: '<p>North</p>'
            }
        })
    ]
    });
});

Это работает. Может кто-нибудь подсказать мне, что я делаю неправильно с методом Extend?

Answer 1

Чтобы исправить ваш код, проблема заключается в неправильном синтаксисе в выражении Extend. Вам нужна запятая после Ext.Viewport, а не дополнительная пара ():

MyNamespace.BaseLayout = Ext.Extend(Ext.Viewport, {
    layout: 'border',
    items: [
        new Ext.BoxComponent({
            region: 'north',
            height: 32,
            autoEl: {
                tag: 'div',
                html: '<p>North</p>'
            }
        })
    ]
});

Однако я бы посоветовал воспользоваться советом @ r-dub и узнать больше о том, что вы пытаетесь сделать.

Answer 2

Вот немного более сложный пример того, чего вы пытаетесь достичь.Я настоятельно рекомендую взглянуть на серию 3 частей компании Saki по созданию больших приложений с помощью ExtJS. Это поможет вам понять, как правильно использовать расширение для создания повторно используемых компонентов.

Ext.ns('MyNamespace');

MyNamespace.BaseLayout = Ext.extend(Ext.Viewport, {
    initComponent:function() {
        var config = {
            layout: 'border',
            items: [
                new Ext.BoxComponent({
                    region: 'north',
                    height: 32,
                    autoEl: {
                        tag: 'div',
                        html: '<p>North</p>'
                    }
                })
            ]
        };
        Ext.apply(this, Ext.apply(this.initialConfig, config));

        MyNamespace.BaseLayout.superclass.initComponent.apply(this,arguments);
    }//end initComponent

});

//this will give you an xtype to call this component by.
Ext.reg('baselayout',MyNamespace.BaseLayout);

Ext.onReady(function() {
    new MyNamespace.BaseLayout({});
});

Answer 3

ExtJS рекомендует использовать определение вместо удлинения.Вот как работает аналогичный пример с define:

 Ext.define('Grid', {
    extend: 'Ext.grid.Panel',
    config: {          
        height: 2000        
    },

    applyHeight: function (height) {           
            return height;
    }       
});

new Grid({
    store: store,
    columns: [{
        text: 'Department',
        dataIndex: 'DepartmentName',
        renderer: function (val, meta, record) {
            return '<a href="DepartmentEmployees/' + record.data.ID + '">' + record.data.DepartmentName + '</a>';
        },
        width: 440,
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Department Code',
        dataIndex: 'DepartmentKey',
        width: 100,
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Main Phone',
        dataIndex: 'MainPhone',
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Room',
        dataIndex: 'RoomLocation',
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Hideway Location',
        dataIndex: 'HideawayLocation',
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Hideway Phone',
        dataIndex: 'HideawayPhone',
        flex: 1,
        filter: 'string',
        sortable: true,
        hideable: false
    }, {
        text: 'Has OEC',
        dataIndex: 'OECFlag',
        xtype: 'checkcolumn',
        width: 50,
        filter: {
            type: 'boolean',
            active: true
        },
        flex: 1,
        sortable: true,
        hideable: false
    },
       {
           text: 'Action',
           dataIndex: 'ID',
           renderer: function (value) {
               return '<a href="DepartmentEdit/' + value + '">Edit</a>';
           },
           hideable: false
       }],
    forceFit: false,
    split: true,
    renderTo: 'departmentSearchGrid',
    frame: false,
    width: 1300,
    plugins: ['gridfilters']
});

Я использовал следующий пост в качестве ссылки: http://docs.sencha.com/extjs/5.0/core_concepts/classes.html