ExtJs组件大全：xtype与Class对应表

"本文将详细介绍ExtJs中的xtype，这是一种用于定义组件类型的关键字，它与对应的Class（类）一起，构成了ExtJs丰富的组件体系。xtype允许开发者以简洁的方式引用和配置各种UI组件，无需直接实例化具体的类。下面分别列举了基本组件、容器及数据类组件以及工具栏组件的常见xtype及其对应的类和描述。" 在ExtJs框架中，xtype是用于创建组件实例的一种简写方式，它映射到实际的组件类。通过xtype，我们可以方便地在布局和配置中引用组件，而无需直接使用完整的类名，这使得代码更加简洁易读。 1. **基本组件** - `button`: Ext.Button，用于创建标准的按钮组件，可以配置文本、图标以及点击事件。 - `splitbutton`: Ext.SplitButton，具有按钮功能的同时，还包含一个下拉菜单，常用于提供附加操作选项。 - `cycle`: Ext.CycleButton，与SplitButton类似，但主要用于在几个预设选项之间循环切换。 - `buttongroup`: Ext.ButtonGroup，用于将多个按钮组合在一起，形成一组相关的操作。 - `slider`: Ext.Slider，创建滑动条组件，用户可以通过拖动滑块来选择值。 - `progress`: Ext.ProgressBar，用于显示进度信息，可以动态更新进度值。 - `statusbar`: Ext.StatusBar，通常位于界面底部，用于显示状态信息，但在3.0版本中被移除。 - `colorpalette`: Ext.ColorPalette，提供一个颜色选择面板，让用户选择颜色。 - `datepicker`: Ext.DatePicker，弹出式的日期选择器，便于用户选择日期。 2. **容器及数据类组件** - `window`: Ext.Window，浮动的窗口组件，可以独立于页面内容显示，支持拖放和大小调整。 - `viewport`: Ext.ViewPort，适应浏览器视口大小的容器，可以自动调整以适应屏幕尺寸变化。 - `box`: Ext.BoxComponent，一个简单的HTML元素容器，通常用作自定义布局的基础。 - `component`: Ext.Component，组件基类，大部分组件都继承自它。 - `container`: Ext.Container，作为其他组件的容器，支持多种布局管理。 - `panel`: Ext.Panel，功能强大的容器，可以包含标题、工具栏、边框等，常用于构建复杂的用户界面。 - `tabpanel`: Ext.TabPanel，带有选项卡的容器，每个选项卡可以承载一个单独的面板。 - `treepanel`: Ext.tree.TreePanel，用于展示树形数据结构的组件。 - `flash`: Ext.FlashComponent，用来嵌入和控制Flash内容的组件。 - `grid`: Ext.grid.GridPanel，显示二维表格数据的组件，支持排序、筛选等功能。 - `editorgrid`: Ext.grid.EditorGridPanel，扩展了GridPanel，支持单元格的编辑。 - `propertygrid`: Ext.grid.PropertyGrid，显示属性列表的表格，常用于配置或查看对象属性。 - `editor`: Ext.Editor，用于在指定区域内进行编辑的组件。 - `dataview`: Ext.DataView，数据展示视图，可以灵活定制数据的显示样式。 - `listview`: Ext.ListView，用于展示列表数据，支持多选和滚动加载。 3. **工具栏组件** - `paging`: Ext.PagingToolbar，用于在大量数据中进行分页浏览，常见于数据网格下方。 - `toolbar`: Ext.Toolbar，创建工具栏，可以包含按钮、分割符、文本等组件。 - `tbbutton`: Ext.Toolbar.Button，工具栏上的按钮，可以是普通的按钮或下拉按钮。 这些xtype覆盖了日常开发中常见的UI组件，通过灵活组合和配置，开发者可以构建出各种复杂且交互丰富的Web应用。了解和熟练掌握这些xtype，对于提升ExtJs应用的开发效率和用户体验至关重要。