如何让Sencha Architect识别自定义xtype并正确渲染配置

1. 直接在Architect中注册自定义组件 #

不要通过process config修改xtype，而是将自定义组件作为独立组件添加到Architect：

• 打开Architect的Toolbox面板，点击右上角的+按钮，选择Add Custom Component
• 在配置窗口中填写：
  • Class Name：Ext.PanelSection
  • Extend：Ext.Panel
  • XType：panelsection
  • Alias：widget.panelsection
• 确认后，该组件会出现在Toolbox的Custom分类下，直接拖入画布即可使用，Architect会直接读取其配置渲染预览

2. 启用源码文件的元数据解析 #

如果自定义组件源码已放在common.js中，需让Architect解析文件中的配置：

• 在Architect的Resources面板中右键点击common.js，勾选Architect Metadata Enabled
• 点击顶部的Reload Project按钮，Architect会解析文件中的组件定义，同步配置到画布预览

3. 添加Architect专用元数据注释（可选） #

若上述操作后仍未识别配置，可在自定义组件类中添加元数据注释，强制指定画布渲染规则：

Ext.define('Ext.PanelSection', {
    extend: 'Ext.Panel',
    xtype: 'panelsection',
    alias: 'widget.panelsection',
    // Sencha Architect元数据，用于画布预览渲染
    // @sencha-architect
    metadata: {
        design: {
            header: {
                height: 18,
                minHeight: 18,
                maxHeight: 18,
                style: 'text-decoration:underline'
            }
        }
    },
    config: {
        shadow: true,
        ui: 'panel-section-title',
        layout: 'vbox',
        header: {
            height: 18,
            minHeight: 18,
            maxHeight: 18,
            style: 'text-decoration:underline'
        }
    }
});

添加后重新加载项目，画布会按照元数据配置渲染组件

4. 为什么process config方式无效 #

通过process config修改xtype仅在运行时生效，Architect的画布预览基于初始添加的Ext.Panel配置渲染，不会读取运行时替换的xtype对应的自定义配置，因此无法正确显示自定义组件的布局参数

内容的提问来源于stack exchange，提问作者David