3.1 Ext JS 组件总览| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

3.1 Ext JS 组件总览

面板类型
面板是用来放置组件元素的容器， 常见的面板类型有：

- 面板（Panels）：常用的组件容器， 用于放置和布局子元素。
- 表单（Forms）：收集用户输入，比如登录、请假单等
- 标签页（Tabs）： 类似浏览器的标签。
- 网格（Grid）： 表格
- 树（Trees）： 层级展开
- 视口（ViewPort）：表示应用程序可见区域（相当于浏览器窗口）的专用容器。
以上面板类型在经典工具集下（也就是桌面端）的效果如下图：
![](/upload/picture/2022-09-27/upload_214f43739ad9ce06061698c98b604ebc.png)

#### 窗口类型
窗口（Windows）是在浏览器的当前便签也弹出一个新的窗口。常用来与用户交互， 比如弹出信息提示框，确认框或是动作选择框等， Ext JS的窗口中也可以放置其他类型的面板和组件。 页面的层次
第一层： - 窗口
第二层： - 面板
第三层： - 组件

简单的窗口示例如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LvxV6qlF-1648163165167)(images/screenshot_1593215472852.png)]

#### 消息窗口的单例类
关于窗口类， 主要注意一下：
Ext JS提供了一个消息窗口的单例类， Ext.MessageBox， 使用这个单例类，可以快速初始一个窗口实例。该单例类提供了一些静态方法直接初始化窗口实例， 类似：

Ext.MessageBox.alert('提示','这是提示信息');

MessageBox还有一个简写的别名 Msg，上面的代码也可以写成：

Ext.Msg.alert('提示','这是提示信息');

除了alert()之外， 常用的方法还有confirm(), prompt() 等。

- confirm ：用户可以选择Yes ， No等选项按钮
- prompt ， 除了有多个选项按钮， 还可以输入一段文字。
元素组件
- 按钮（Buttons）： 用于接收用户端动作
- 数据视图（DataVIew）： 以小图标更直观的展现数据
- 表单字段（Form Fields）：包括文本输入、下拉单、日期、数字以及字段容器等输入组件
- 提示框（ToolTips）： 鼠标停留时弹出对话框显示更多的信息，也可以显示图片
- 工具栏（Toolbars）：按钮和菜单等的统一容器
经典工具集下的面板效果（桌面端）
在这里插入图片描述

#### 高级组件
- 图（Charts）：包括折线图、柱状图、饼图等
- D3（D3是一种Web绘图工具）：Ext JS整合D3在网页上绘制需要的图形。
- 日历（Calendar）：
- 枢轴网格（Pivot Grid）：带数据汇总和统计功能的网格
- 测量仪（Gauge）
#### 扩展组件
- 拖拽组件（Drag&Drop）
- 企业网格（Enterprise）：网格数据通过AMF或是SOAP方式获取
高级组件和扩展组件效果参加后面章节。

参考
https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?classic
https://examples.sencha.com/extjs/7.0.0/examples/kitchensink/?modern

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

3.1 Ext JS 组件总览

网站导航