今天开始学习了Extjs,本来有一些javascript的基础,学起Extjs的感觉他和js基本类似。
Extjs本身需要一个源文件。。需要从官网上下下一个来。然后把那个文件夹重命名为Extjs,重新放到你的项目所在文件夹里。
今天首先大致了解了一下Extjs的整体结构:底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上,底层api 位于源代码目录的core 子目录中,包括DomHelper.js
、Element.js 等文件,如图xx 所示。
控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,
在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中,包含
如图xx 所示。
实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码
、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,如图所示:
以上这些都是Ext本身的结构,Ext有自己的组件,它的结构图简明。。有各种组件及其子级的组件。。下面是Extjs本身的组件图:
组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。
基本组件有:
xtype | Class |
box | Ext.BoxComponent 具有边框属性的组件 |
Button | Ext.Button 按钮 |
colorpalette | Ext.ColorPalette 调色板 |
component | Ext.Component 组件 |
container | Ext.Container 容器 |
cycle | Ext.CycleButton |
dataview | Ext.DataView 数据显示视图 |
datepicker | Ext.DatePicker 日期选择面板 |
editor | Ext.Editor 编辑器 |
editorgrid | Ext.grid.EditorGridPanel 可编辑的表格 |
grid | Ext.grid.GridPanel 表格 |
paging | Ext.PagingToolbar 工具栏中的间隔 |
panel | Ext.Panel 面板 |
progress | Ext.ProgressBar 进度条 |
splitbutton | Ext.SplitButton 可分裂的按钮 |
tabpanel | Ext.TabPanel 选项面板 |
treepanel | Ext.tree.TreePanel 树 |
viewport | Ext.ViewPort 视图 |
window | Ext.Window 窗口 |
工具栏组件有:
toolbar | Ext.Toolbar 工具栏 |
tbbutton | Ext.Toolbar.Button 按钮 |
tbfill | Ext.Toolbar.Fill 文件 |
tbitem | Ext.Toolbar.Item 工具条项目 |
tbseparator | Ext.Toolbar.Separator 工具栏分隔符 |
tbspacer | Ext.Toolbar.Spacer 工具栏空白 |
tbsplit | Ext.Toolbar.SplitButton 工具栏分隔按钮 |
tbtext | Ext.Toolbar.TextItem 工具栏文本项 |
表单及字段组件包含
form | Ext.FormPanel Form 面板 |
checkbox | Ext.form.Checkbox checkbox 录入框 |
combo | Ext.form.ComboBox combo 选择项 |
datefield | Ext.form.DateField 日期选择项 |
field | Ext.form.Field 表单字段 |
fieldset | Ext.form.FieldSet 表单字段组 |
hidden | Ext.form.Hidden 表单隐藏域 |
htmleditor | Ext.form.HtmlEditor html 编辑器 |
numberfield | Ext.form.NumberField 数字编辑器 |
radio | Ext.form.Radio 单选按钮 |
textarea | Ext.form.TextArea 区域文本框 |
textfield | Ext.form.TextField 表单文本框 |
timefield | Ext.form.TimeField 时间录入项 |
trigger | Ext.form.TriggerField 触发录入项 |