---
title: "可视化组件分类"
description: "controls.json 中可在桌面设计器画布中操作的 38 个组件。"
---

> Documentation Index
> Fetch the complete documentation index at: https://ag.879818327.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# 可视化组件分类

此分类以 `controls.json` 的源码元数据为准。纳入条件为：叶子节点定义了 `general.xtype`，且没有设置 `general.design: false`。`type` 是保存到 XWL 的节点类型，`xtype` 是设计器预览时创建的 Ext 组件类型。

## 页面与容器

| 组件 | type | xtype | 用途 |
| --- | --- | --- | --- |
| [面板](/ext/layout/panel-panel/) | `panel` | `panel` | 常规内容容器。 |
| [窗口](/ext/layout/window-window/) | `window` | `window` | 独立窗口容器。 |
| [表单](/ext/form/form-panel/) | `form` | `form` | 承载表单字段的容器。 |
| [标签页](/ext/navigation/tab-panel/) | `tab` | `tabpanel` | 多页签容器。 |
| [字段集](/ext/form/form-fieldset/) | `fieldset` | `fieldset` | 为一组字段提供标题和边框。 |
| [容器](/ext/layout/container-container/) | `container` | `container` | 通用布局容器。 |
| [基础组件](/ext/basic/component/) | `comp` | `component` | 无专用 UI 的 Ext 基础组件。 |
| [工具栏](/ext/navigation/toolbar-toolbar/) | `toolbar` | `toolbar` | 按钮和工具项的横向容器。 |

## 表单与交互

| 组件 | type | xtype | 用途 |
| --- | --- | --- | --- |
| [按钮](/ext/navigation/button-button/) | `button` | `button` | 触发点击事件或命令。 |
| [标签](/ext/form/form-label/) | `label` | `label` | 显示静态文本。 |
| [文本框](/ext/form/dev-ux-uppertextfield/) | `text` | `uppertextfield` | 项目扩展的文本输入字段。 |
| [数字框](/ext/form/form-field-number/) | `number` | `numberfield` | 数值输入。 |
| [多行文本](/ext/form/form-field-textarea/) | `textarea` | `textarea` | 多行文本输入。 |
| [下拉框](/ext/form/form-field-combobox/) | `combo` | `combo` | 从数据项中选择值。 |
| [日期](/ext/form/form-field-date/) | `date` | `datefield` | 日期输入。 |
| [时间](/ext/form/form-field-time/) | `time` | `timefield` | 时间输入。 |
| [日期时间](/ext/form/form-field-datetime/) | `datetime` | `datetimefield` | 日期和时间输入。 |
| [精细日期时间](/ext/form/form-field-datetimedetail/) | `datetimedetail` | `datetimedetailfield` | 项目扩展的精细日期时间输入。 |
| [文件](/ext/form/form-field-file/) | `file` | `filefield` | 选择上传文件。 |
| [复选框](/ext/form/form-field-checkbox/) | `check` | `checkbox` | 布尔选择。 |
| [单选框](/ext/form/form-field-radio/) | `radio` | `radio` | 单项选择。 |
| [月份](/ext/form/ux-form-monthfield/) | `dateMonth` | `monthfield` | 月份选择。 |

## 数据视图

| 组件 | type | xtype | 用途 |
| --- | --- | --- | --- |
| [数据视图](/ext/data/view-view/) | `dataview` | `dataview` | 用模板显示记录集合。 |
| [表格](/ext/data/grid-panel/) | `grid` | `grid` | 以列和行展示数据。 |
| [树](/ext/data/tree-panel/) | `tree` | `treepanel` | 展示层级数据。 |
| [属性表格](/ext/data/grid-property-grid/) | `propertygrid` | `propertygrid` | 以属性名和值展示对象。 |

## 扩展组件

| 组件 | type | xtype | 用途 |
| --- | --- | --- | --- |
| [图片](/ext/basic/img/) | `image` | `image` | 显示图片资源。 |
| [字段容器](/ext/form/form-fieldcontainer/) | `fieldcontainer` | `fieldcontainer` | 为字段组合提供标签和布局。 |
| [复选组](/ext/form/form-checkboxgroup/) | `checkgroup` | `checkboxgroup` | 管理一组复选框。 |
| [单选组](/ext/form/form-radiogroup/) | `radiogroup` | `radiogroup` | 管理一组单选框。 |
| [显示字段](/ext/form/form-field-display/) | `displayfield` | `displayfield` | 显示只读值。 |
| [HTML 编辑器](/ext/form/form-field-htmleditor/) | `htmleditor` | `htmleditor` | 编辑富文本 HTML。 |
| [滑块](/ext/picker/slider-single/) | `slider` | `slider` | 输入连续数值。 |
| [按钮组](/ext/layout/container-buttongroup/) | `buttongroup` | `buttongroup` | 对按钮作分组布局。 |
| [颜色字段](/ext/form/wb-field-colorfield/) | `colorfield` | `colorfield` | 项目扩展的颜色输入字段。 |
| [控件选择器](/ext/form/form-field-picker/) | `picker` | `controlpicker` | 弹出选择控件。 |

## 图表

| 组件 | type | xtype | 用途 |
| --- | --- | --- | --- |
| [ECharts 图表](/ext/basic/echart-chart/) | `echart` | `echart` | 项目封装的 ECharts 图表组件。 |
| [Ext 图表](/ext/visual/chart-chart/) | `chart` | `chart` | Ext JS 图表组件。 |

## 非画布条目

以下注册分组没有纳入上表：`Data Access`、`Server`、`Touch`、`Bootstrap` 和 `supccan` 的条目均设置了 `general.design: false`，或没有桌面 `xtype`；`List View` 的 `column`、`tableview`、`feature`、`editing` 是表格的子配置；`Charts` 中的轴、序列、标题、提示框等是图表配置子节点。这些条目仍由同一注册表管理，且会参与 XWL 保存和运行时解析。

Source: https://ag.879818327.xyz/controls/visual-components/index.mdx