使用layout:'border'时遇Unrecognized alias: layout.border报错求助

核心原因 #

报错源于未正确加载Ext JS的Border布局类，或是当前使用的Ext JS版本中布局别名配置存在问题。

具体修复步骤 #

• 确保项目引入Ext.layout.container.Border类：
  在Ext的require配置中添加该类，示例代码：

  Ext.require([
      'Ext.layout.container.Border',
      'Ext.panel.Panel'
  ]);
  

• 校验布局配置的正确性：
  面板需配置layout: 'border'，同时子面板必须指定region属性（可选值：north/south/east/west/center），示例代码：

  Ext.create('Ext.panel.Panel', {
      renderTo: Ext.getBody(),
      width: 800,
      height: 600,
      layout: 'border',
      items: [
          {
              title: '顶部面板',
              region: 'north',
              height: 100
          },
          {
              title: '主内容区',
              region: 'center'
          }
      ]
  });
  

• Sencha Fiddle环境的特殊处理：
  在Fiddle的"Requires"面板中勾选Ext.layout.container.Border，确保该类被正确加载。

额外说明 #

若使用Sencha Cmd构建项目，需确保BorderLayout类被包含在构建包内——可在app.json的requires数组中添加对应类，再执行sencha app build命令重新构建项目。

内容的提问来源于stack exchange，提问作者Евгений Мушков