ExtJS学习
ExtJS是一门比较纠结的框架，自己不太熟，因为现在在做一些老项目，所以没办法要学点。记录下。其实Ext也不是很难，主要是多查查API，了解其基本的用法，然后慢慢去学习，学成之后做管理系统还是很有优势的，当然，5.0版本和3.0版本还是有很大区别的。
Ext JS 5现在支持以下浏览器：
- IE8+ (只支持标准模式)
- Firefox 12+ (PC & Mac)
- Safari 6+
- Chrome 18+
- Opera 12+ (PC & Mac)
这是目前最新版的ExtJS5.1.0版本，下载解压出来的文件如下：
http://docs-origin.sencha.com/extjs/5.1/5.1.0-apidocs/这个地址是ExtJS的API地址。
build:压缩后的Ext全部源码（分类存放）目录下截图如下：
- ext-all.js:压缩后的Ext全部源码，包含了ExtJS的所有控件
- ect-debug.js:用于开发错误提示
- ext-all-debug.js:压缩的debug.js，报错的时候会详细一点(开发的时候不用，因为出错不好定位)
package:Ext提供的常用控件、主题和语言包目录截图如下：
我们先找到本地化语言包，ext-locale包是本地化语言包，我们只保留里面的ext-locale-zh_CN.js（在ext-5.1.0\packages\ext-locale\build目录下），这个是简体中文语言包。带有theme的是主题包
这里我们随便选择一个主题包用于开发
exmaple:使用Ext作出的小demo
我们把自己开发需要的文件全部提取出来，如下图所示
其中ext-all.js原路径为ext-5.1.0/build/ext-all.js
ext-local-zh_CN.js原路径为ext-5.1.0/packages/ext-locale/build/ext-local-zh_CN.js
ext-theme-crisp-all.css原路径为ext-5.1.0/build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css(可以自己更换主题)
- 在根目录下建一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello</title>
<script src="ext-all.js"></script>
<script src="ext-locale-zh_CN.js"></script>
<link href="ext-theme-crisp/build/resources/ext-theme-crisp-all.css" rel="stylesheet" />
</head>
<body>
<script type="text/javascript">
Ext.onReady(function () {
Ext.MessageBox.alert("提示", "Hello World");
});
</script>
</body>
</html>
- 结果
extends:扩展，传统面向对象的extends
apply/applyif:实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝
override:方法重写
namespace/ns:命名空间
组件主要分为三大类：基本组件、工具栏组件、表单及元素组件。
Xtype(类的类型)：
| 基本组件： | ||
| xtype | Class | 描述 |
| button | Ext.Button | 按钮 |
| splitbutton | Ext.SplitButton | 带下拉菜单的按钮 |
| cycle | Ext.CycleButton | 带下拉选项菜单的按钮 |
| buttongroup | Ext.ButtonGroup | 编组按钮(Since 3.0) |
| slider | Ext.Slider | 滑动条 |
| progress | Ext.ProgressBar | 进度条 |
| statusbar | Ext.StatusBar | 状态条，2.2加进来，3.0 又去了 |
| colorpalette | Ext.ColorPalette | 调色板 |
| datepicker | Ext.DatePicker | 日期选择面板 |
| 容器及数据类组件 | ||
| xtype | Class | 描述 |
| window | Ext.Window | 窗口 |
| viewport | Ext.ViewPort | 视口，即浏览器的视口，能随之伸缩 |
| box | Ext.BoxComponent | 盒子组件，相当于一个 <div> |
| component | Ext.Component | 组件 |
| container | Ext.Container | 容器 |
| panel | Ext.Panel | 面板 |
| tabpanel | Ext.TabPanel | 选项面板 |
| treepanel | Ext.tree.TreePanel | 树型面板 |
| flash | Ext.FlashComponent | 显示 Flash 的组件(Since 3.0) |
| grid | Ext.grid.GridPanel | 表格 |
| editorgrid | Ext.grid.EditorGridPanel | 可编辑的表格 |
| propertygrid | Ext.grid.PropertyGrid | 属性表格 |
| editor | Ext.Editor | 编辑器 |
| dataview | Ext.DataView | 数据显示视图 |
| listview | Ext.ListView | 列表视图 |
| 工具栏组件： | ||
| xtype | Class | 描述 |
| paging | Ext.PagingToolbar | 分页工具条 |
| 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 | 工具栏文本项 |
| 菜单组件： | ||
| xtype | Class | 描述 |
| menu | Ext.menu.Menu | 菜单 |
| colormenu | Ext.menu.ColorMenu | 颜色选择菜单 |
| datemenu | Ext.menu.DateMenu | 日期选择菜单 |
| menubaseitem | BaseItem | |
| menucheckitem | Ext.menu.CheckItem | 选项菜单项 |
| menuitem | Ext.menu.Item | |
| menuseparator | Ext.menu.Separator | 菜单分隔线 |
| menutextitem | Ext.menu.TextItem | 文本菜单项 |
| 表单及表单域组件： | ||
| xtype | Class | 描述 |
| form | Ext.FormPanel/Ext.form.FormPanel | 表单面板 |
| checkbox | Ext.form.Checkbox | 多选框 |
| combo | Ext.form.ComboBox | 下拉框 |
| datefield | Ext.form.DateField | 日期选择项 |
| timefield | Ext.form.TimeField | 时间录入项 |
| field | Ext.form.Field | 表单字段 |
| fieldset | Ext.form.FieldSet | 表单字段组 |
| hidden | Ext.form.Hidden | 表单隐藏域 |
| htmleditor | Ext.form.HtmlEditor | HTML 编辑器 |
| label | Ext.form.Label | 标签 |
| numberfield | Ext.form.NumberField | 数字编辑器 |
| radio | Ext.form.Radio | 单选按钮 |
| textarea | Ext.form.TextArea | 多行文本框 |
| textfield | Ext.form.TextField | 表单文本框 |
| trigger | Ext.form.TriggerField | 触发录入项 |
| checkboxgroup | Ext.form.CheckboxGroup | 编组的多选框(Since 2.2) |
| displayfield | Ext.form.DisplayField | 仅显示，不校验/不被提交的文本框 |
| radiogroup | Ext.form.RadioGroup | 编组的单选按钮(Since 2.2) |
| 图表组件： | ||
| xtype | Class | 描述 |
| chart | Ext.chart.Chart | 图表组件 |
| barchart | Ext.chart.BarChart | 柱状图 |
| cartsianchart | Ext.chart.CartesianChart | |
| columnchart | Ext.chart.ColumnChart | |
| linechart | Ext.chart.LineChart | 连线图 |
| piechart | Ext.chart.PieChart | 扇形图 |
| 数据集 Store： | ||
| xtype | Class | 描述 |
| arraystore | Ext.data.ArrayStore | |
| directstore | Ext.data.DirectStore | |
| groupingstore | Ext.data.GroupingStore | |
| jsonstore | Ext.data.JsonStore | |
| simplestore | Ext.data.SimpleStore | |
| store | Ext.data.Store | |
| xmlstore | Ext.data.XmlStore | |
ExtJS学习的更多相关文章
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- ExtJs学习之Window
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- ExtJS学习之路第六步：深入讨论组件Panel用法
Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...
- ExtJS学习之路第五步：认识最常见组件Panel
文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...
- ExtJS学习之路第一步：对比jQuery,认识ExtJS
最近纷杂的事情比较多了,奔波ing!所以,Node.js 和Canvas动画系列都停止了,等稳定了再重拾书本继续学习!因为某种原因最近在看ExtJS,分享下学习的心得,希望对同道中人有所帮助. 第一用 ...
- extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- EXTJS学习笔记
由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构? 推荐一篇文章: ...
- 透过Extjs学习JavaScript---闭包篇
目录 一.前言 二.基础讲解 三.知识应用 四.总结 五.常见问题 一.前言 JavaScript设计得最出色的就是它的函数的实现,它几乎接近于完美.我们现在现就来介绍它其中一个功能“闭包”.我们可以 ...
- ExtJS学习第一天 MessageBox
此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方 ...
随机推荐
- volatile关键字的介绍和使用
关键字volatile的主要作用是使变量在过个线程中可见 1.假设volatile不存在我们将会面对的问题 public class PrintString implements Runnable { ...
- 微信分享SDK
网址:http://www.8ru.org/weixin-js-sdk.html 下载demo:http://demo.open.weixin.qq.com/jssdk
- jQuery实现布局高宽自适应
在页面布局(layout)时经常是上左右的框架布局并且需要宽.高度的自适应,div+css是无法实现(*hegz:div+css其实是可以实现的,利用jQuery比较容易实现浏览器的兼容性),所以需要 ...
- js元素绑定事件
想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=function(){ a ...
- 【学习笔记】jQuery中的动画与效果
1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback]) 返回值: ...
- flume-kafka-storm日志处理经验
转自:http://www.aboutyun.com/thread-9216-1-1.html 使用Storm处理事务型实时计算需求时的几处难点: http://blog.sina.com.cn/s/ ...
- 关于在Android中访问和使用到上下文变量
在监听器内部实现类中要引用上下文变量this的时候 一.采用类名.this的方法 FActivity.this 二.采用全局变量当做中间变量 1.先定义一个全局变量 private Context m ...
- 【转】WCF入门教程一[什么是WCF]
一.概述 Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows通讯接口,它是.NET框架的一部分.由 .NE ...
- Extracting and composing robust features with denosing autoencoders 论文
这是一篇发表于2008年初的论文. 文章主要讲了利用 denosing autoencoder来学习 robust的中间特征..进上步,说明,利用这个方法,可以初始化神经网络的权值..这就相当于一种非 ...
- 第二百九十节，MySQL数据库-MySQL命令行导出导入数据库，数据库备份还原
MySQL命令行导出导入数据库,数据库备份还原 MySQL命令行导出数据库:1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录如我输入的命令行:cd C:\Program ...