如何使用Sencha ExtWebComponents创建视图及组合组件元素？

嘿，我来帮你搞定这两个关于ExtWebComponents的问题，都是入门级的实用操作，一步步来就很清晰～

要创建一个基础的ExtWebComponents视图，其实只需要几步：

• 首先在你的HTML文件中引入ExtWebComponents的核心脚本（可以用本地资源或者官方提供的CDN资源）。
• 然后直接使用Ext提供的自定义组件标签，结合HTML内容构建视图就行。

给你一个完整的示例：

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个Ext视图</title>
    <!-- 引入ExtWebComponents核心脚本 -->
    <script src="ext-web-components.js"></script>
</head>
<body>
    <!-- 用Ext面板作为基础视图容器 -->
    <ext-panel title="欢迎使用ExtWebComponents" width="400" height="250">
        <!-- 通过slot将自定义内容插入面板的主体区域 -->
        <div slot="body">
            这是视图里的自定义内容😉<br>
            你可以在这里放文本、图片或者其他元素
        </div>
    </ext-panel>
</body>
</html>

这里的slot="body"是关键，它告诉Ext面板把我们的自定义div内容放到它的主体区域中，ExtWebComponents就是用HTML插槽来处理内容分发的，非常直观。

这部分更简单！ExtWebComponents的组件本身就是标准的自定义HTML元素，所以和原生HTML元素（比如div、h3）完全兼容，你可以像写常规HTML一样随意组合它们。

比如你提到的<div>View</div> <ext-button></ext-button>，我给你扩展成一个完整的可运行示例：

<!DOCTYPE html>
<html>
<head>
    <title>组合元素与Ext组件</title>
    <script src="ext-web-components.js"></script>
</head>
<body>
    <!-- 用原生div作为容器，混合放置原生元素和Ext组件 -->
    <div style="padding: 20px;">
        <h3>这是原生HTML标题</h3>
        <div>View</div>
        <!-- Ext按钮组件，带点击事件 -->
        <ext-button text="点我试试" handler="() => alert('按钮被点击啦！')" style="margin-left: 10px;"></ext-button>
        <!-- 再添加一个Ext文本框组件 -->
        <ext-textfield placeholder="输入点内容" style="margin-left: 10px;"></ext-textfield>
    </div>

    <!-- 如果需要更规整的布局，还可以用Ext的布局组件 -->
    <ext-container layout="hbox" padding="20" gap="15">
        <div>用户名：</div>
        <ext-textfield flex="1" placeholder="请输入用户名"></ext-textfield>
        <ext-button text="提交"></ext-button>
    </ext-container>
</body>
</html>

不管是并列放置还是嵌套，原生元素和Ext组件都能完美配合。如果需要复杂布局，用Ext的ext-container加上对应的布局配置（比如layout="hbox"横向排列），就能轻松管理元素和组件的排列方式啦。

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