Question

这是使用extjs4的新动态加载功能的索引页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="stylesheet" type="text/css" href="/public/assets/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/public/assets/themes/default/index.css" />
<script type="text/javascript" src="/public/assets/ext/builds/ext-core-dev.js"></script>
<!--
<script type="text/javascript" src="/public/assets/ext/ext-all-dev.js"></script>
<script type="text/javascript" src="/public/assets/ext/locale/ext-lang-zh_CN.js"></script>
-->
<script type="text/jscript">

Ext.Loader.setConfig({
    enabled:true,
    paths:{
        'Ext':'/public/assets/ext/src',
        'Test':'/public/assets/test'
    }
});

Ext.require([
            'Ext.layout.container.*',
            'Ext.tab.*',
            'Ext.resizer.Splitter',
            'Ext.fx.target.Element',
            'Ext.fx.target.Component',
            'Ext.window.Window',
            'Ext.data.TreeStore',
            'Test.app.Portal'

]);
Ext.onReady(function(){
    Ext.create('Test.app.Portal');
});
</script>
</head>
<body>
</body>
</html>

在目录/ public / assets / test / app中，有一个名为Portal.js的文件：

Ext.define('Test.app.Portal', {
    extend: 'Ext.container.Viewport',
    initComponent: function(){
        var content = '<div class="portlet-content">test</div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5' // pad the layout from the window edges
            },
            items: [{
                id: 'app-header',
                xtype: 'box',
                region: 'north',
                height: 40,
                html: 'whatever'
            },{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{
                    id: 'app-options',
                    title: '',
                    region: 'west',
                    animCollapse: true,
                    width: 200,
                    minWidth: 150,
                    maxWidth: 400,
                    split: true,
                    collapsible: true,
                    layout: 'accordion',
                    layoutConfig:{
                        animate: true
                    },
                    items: [{
                        title:'功能菜单',
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav',
                        id: 'function-menu'
                        html:'shit'
                    },{
                        title:'常用菜单',
                        html: content,
                        border: false,
                        autoScroll: true,
                        iconCls: 'settings',
                        id: 'shortcut-menu'
                    }]
                },{
                    id: 'app-portal',
                    xtype: 'panel',
                    region: 'center',
                    items: [{
                        id: 'tab-1',
                        title: '我的首页',
                        closable:true,
                        autoScroll:true
                    }]
                }]
            }]
        });
        this.callParent(arguments);
    }

});

在Chrome DevTool中

，错误如下：

enter image description here

Answer 1

除了结束逗号外，我找不到任何错误：

id: 'function-menu',

如果你还有问题，请尝试修复html的头部。我有这个头：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="./../ext/bootstrap.js"></script>
...

ExtJS4错误：未捕获的Ext.Error：无法创建无法识别的别名实例：layout.border

1 个答案: