Extjs布局扩展导致ext-all.js中的错误 [英] Extjs layout extension causing error in ext-all.js

问题描述

我正在尝试学习Extjs，但我马上想到了一个问题.我的HTML正确包含了ext-base.js和ext-all.js.然后，我的js文件中包含以下内容:

I am trying to learn Extjs and I am immediately coming up with an issue. My Html has ext-base.js and ext-all.js correctly included. I then have the following in my js file:

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

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

到目前为止，一切正常，没有错误，警报已正确抛出.然后，在onReady之后添加以下代码:

So far everything is working, no errors and the alert is thrown correctly. I then add the following code after 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错误:

This causes the following javascript error in 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函数中(如下所示)

If I take the Viewport code and put it directly into the OnReady function it (like the following)

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方法做错了什么吗?

It works. Can anyone clue me in to what I am doing wrong with the Extend method?

推荐答案

下面是您要完成的工作的一个更复杂的示例.我强烈建议您看一下Saki的 3部分系列(使用ExtJS构建大型应用程序)，它将帮助您了解其如何正确使用扩展来创建可重复使用的组件.

Here's a bit more complicated example of what you're trying to accomplish. I'd strongly suggest taking a look at Saki's 3 part series in building large apps with ExtJS, it'll help you understand how it use extend properly to create re-usable components.

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({});
});

这篇关于Extjs布局扩展导致ext-all.js中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！