ExtJS4錯誤：未捕獲Ext.Error：無法創建別名無法識別的一個實例：layout.border

下面是使用extjs4的新的動態加載功能ExtJS4錯誤：未捕獲Ext.Error：無法創建別名無法識別的一個實例：layout.border

<!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>

在目錄/公/資產/測試/應用

索引頁，有一個名爲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

來源

2011-08-15 tunpishuang

我不能行發現，除了年底逗號任何錯誤：

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> 
...

來源

2011-08-15 11:06:04

ExtJS4錯誤：未捕獲Ext.Error：無法創建別名無法識別的一個實例：layout.border

回答

相關問題