学习 extjs之路

   今天开始学习了Extjs,本来有一些javascript的基础,学起Extjs的感觉他和js基本类似。

Extjs本身需要一个源文件。。需要从官网上下下一个来。然后把那个文件夹重命名为Extjs,重新放到你的项目所在文件夹里。

 

             今天首先大致了解了一下Extjs的整体结构:底层API(core):底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询
器等基础的功能。其它控件都是建立在这些底层api 的基础上,底层api 位于源代码目录的core 子目录中,包括DomHelper.js

、Element.js 等文件,如图xx 所示。

image

控件(widgets):控件是指可以直接在页面中创建的可视化组件,比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等,

在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中,包含
如图xx 所示。

image

实用工具Utils:Ext 提供了很多的实用工具,可以方便我们实现如数据内容格式化、JSON数据解码或反解码

、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能,如图所示:

 

image

以上这些都是Ext本身的结构,Ext有自己的组件,它的结构图简明。。有各种组件及其子级的组件。。下面是Extjs本身的组件图:

 

 

image

组件大致可以分成三大类,即基本组件、工具栏组件、表单及元素组件。

基本组件有:

xtype

Class
boxExt.BoxComponent 具有边框属性的组件
ButtonExt.Button 按钮
colorpaletteExt.ColorPalette 调色板
componentExt.Component 组件
containerExt.Container 容器

cycle

Ext.CycleButton
dataviewExt.DataView 数据显示视图
datepickerExt.DatePicker 日期选择面板
editorExt.Editor 编辑器
editorgridExt.grid.EditorGridPanel 可编辑的表格
gridExt.grid.GridPanel 表格
pagingExt.PagingToolbar 工具栏中的间隔
panelExt.Panel 面板
progressExt.ProgressBar 进度条
splitbuttonExt.SplitButton 可分裂的按钮

tabpanel

Ext.TabPanel 选项面板
treepanelExt.tree.TreePanel 树
viewportExt.ViewPort 视图
windowExt.Window 窗口
  

工具栏组件有:

toolbarExt.Toolbar 工具栏
tbbuttonExt.Toolbar.Button 按钮
tbfillExt.Toolbar.Fill 文件
tbitemExt.Toolbar.Item 工具条项目
tbseparatorExt.Toolbar.Separator 工具栏分隔符
tbspacerExt.Toolbar.Spacer 工具栏空白

tbsplit

Ext.Toolbar.SplitButton 工具栏分隔按钮
tbtextExt.Toolbar.TextItem 工具栏文本项
  

 

表单及字段组件包含

formExt.FormPanel Form 面板
checkboxExt.form.Checkbox checkbox 录入框
comboExt.form.ComboBox combo 选择项
datefieldExt.form.DateField 日期选择项
fieldExt.form.Field 表单字段
fieldsetExt.form.FieldSet 表单字段组
hiddenExt.form.Hidden 表单隐藏域
htmleditorExt.form.HtmlEditor html 编辑器
numberfieldExt.form.NumberField 数字编辑器
radioExt.form.Radio 单选按钮
textareaExt.form.TextArea 区域文本框
textfieldExt.form.TextField 表单文本框
timefieldExt.form.TimeField 时间录入项
triggerExt.form.TriggerField 触发录入项
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值