Fatal编程技术网
  • javascript/
  • Javascript Extjs布局扩展导致ext-all.js出错

Javascript Extjs布局扩展导致ext-all.js出错

javascript extjs

Javascript Extjs布局扩展导致ext-all.js出错,javascript,extjs,Javascript,Extjs,我正在尝试学习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"); }); Ex

我正在尝试学习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");
});

Ext.BLANK\u IMAGE\u URL=''；
Ext.ns（'MyNamespace'）；
Ext.onReady（函数（）{
警报（“onReady（）已触发”）；
});
到目前为止，一切正常，没有错误，警报正确抛出。然后在onReady之后添加以下代码：

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

MyNamespace.BaseLayout=Ext.Extend（Ext.Viewport({
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
}));
这会导致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)

uncaughttypeerror:Object#没有方法'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
（匿名函数）MyApp.js:13（指向Ext.Extend行）
如果我获取视口代码并将其直接放入OnReady函数中，则会显示它（如下所示）

Ext.onReady（函数（）{
var bl=新的外部视口({
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
});
});
它起作用了。有人能告诉我Extend方法的错误吗？

这里有一个更复杂的示例，说明您试图实现的目标。我强烈建议看一看Saki使用ExtJS构建大型应用程序的经验，它将帮助您了解如何正确使用extend来创建可重用的组件

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

Ext.ns（'MyNamespace'）；
MyNamespace.BaseLayout=Ext.extend（Ext.Viewport{
initComponent:function（）{
变量配置={
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
};
Ext.apply（this，Ext.apply（this.initialConfig，config））；
MyNamespace.BaseLayout.superclass.initComponent.apply（这是参数）；
}//端部元件
});
//这将为您提供一个xtype来调用此组件。
Ext.reg（'baselayout'，MyNamespace.baselayout）；
Ext.onReady（函数（）{
新的MyNamespace.BaseLayout（{}）；
});
下面是一个更复杂的示例，说明您要完成的任务。我强烈建议看一看Saki使用ExtJS构建大型应用程序的经验，它将帮助您了解如何正确使用extend来创建可重用的组件

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

Ext.ns（'MyNamespace'）；
MyNamespace.BaseLayout=Ext.extend（Ext.Viewport{
initComponent:function（）{
变量配置={
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
};
Ext.apply（this，Ext.apply（this.initialConfig，config））；
MyNamespace.BaseLayout.superclass.initComponent.apply（这是参数）；
}//端部元件
});
//这将为您提供一个xtype来调用此组件。
Ext.reg（'baselayout'，MyNamespace.baselayout）；
Ext.onReady（函数（）{
新的MyNamespace.BaseLayout（{}）；
});
要修复代码，问题只是Extend语句中的语法错误。Ext.Viewport后面需要逗号，而不是额外的（）对：

MyNamespace.BaseLayout=Ext.Extend（Ext.Viewport{
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
});
但是，我建议您接受@r-dub的建议，并阅读更多关于您正在尝试执行的操作的信息。

要修复您的代码，问题只是Extend语句中的语法错误。Ext.Viewport后面需要逗号，而不是额外的（）对：

MyNamespace.BaseLayout=Ext.Extend（Ext.Viewport{
布局：“边框”，
项目：[
新的Ext.BoxComponent({
地区：'北'，
身高：32，
autoEl：{
标签：“div”，
html:“North
”
}
})
]
});
然而，我建议采纳@r-dub的建议，并阅读更多关于您尝试做什么的内容。

ExtJS建议使用define而不是extend。下面是一个类似的示例如何使用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']
});

Ext.define（'Grid'）{
扩展：“Ext.grid.Panel”，
配置：{
身高：2000
},
applyHeight:函数（高度）{
返回高度；
}       
});
新电网({
店:店,，
栏目：[{
正文：“部门”，
数据索引：“部门名称”，
渲染器：函数（val、meta、record）{
返回“”；
},
宽度：440，
弹性：1，
筛选器：“字符串”，
可排序：是的，
隐藏的：假的
}, {
文本：“部门代码”，
dataIndex:'DepartmentKey'，
宽度：100，
弹性：1，
筛选器：“字符串”，
可排序：是的，
隐藏的：假的
}, {
文本：“主电话”，
dataIndex:'MainPhone'，
弹性：1，
筛选器：“字符串”，
可排序：是的，
隐藏的：假的
}, {
文本：“房间”，
数据索引：“RoomLocation”，
弹性：1，

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