javascript - 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>'
            }
        })
    ]
}));

这会导致 Chrome 中出现以下 JavaScript 错误:

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 的建议并阅读更多有关您想要做什么的内容。