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(可以自己更换主题)

创建一个HelloWorld程序
  • 在根目录下建一个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>
  • 结果

ExtJS在面向对象方面的支持

extends:扩展,传统面向对象的extends

apply/applyif:实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝

override:方法重写

namespace/ns:命名空间

ExtJS组件

组件主要分为三大类:基本组件、工具栏组件、表单及元素组件。 

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学习的更多相关文章

  1. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  2. ExtJs学习之Window

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  4. ExtJS学习之路第六步:深入讨论组件Panel用法

    Panel加载页面 var myPanel=Ext.create('Ext.panel.Panel',{ bodyPadding: "15px 10px 0 10px", titl ...

  5. ExtJS学习之路第五步:认识最常见组件Panel

    文档中描述 Panel(面板)是一个容器,它具有特定的功能和结构部件,这使它成为面向应用用户界面的完美基石.面板,继承自Ext.container.Container,能够配置布局以及子组件(Chil ...

  6. ExtJS学习之路第一步:对比jQuery,认识ExtJS

    最近纷杂的事情比较多了,奔波ing!所以,Node.js 和Canvas动画系列都停止了,等稳定了再重拾书本继续学习!因为某种原因最近在看ExtJS,分享下学习的心得,希望对同道中人有所帮助. 第一用 ...

  7. extjs 学习笔记(二)

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  8. EXTJS学习笔记

    由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构?   推荐一篇文章: ...

  9. 透过Extjs学习JavaScript---闭包篇

    目录 一.前言 二.基础讲解 三.知识应用 四.总结 五.常见问题 一.前言 JavaScript设计得最出色的就是它的函数的实现,它几乎接近于完美.我们现在现就来介绍它其中一个功能“闭包”.我们可以 ...

  10. ExtJS学习第一天 MessageBox

    此文用来记录学习笔记: •学习任何技术,首先都要从Helloworld开始,那么我们首要任务就是写一个简单的HelloWorld程序,带领同学们走进ExtJS的世界. •Ext.onReady:这个方 ...

随机推荐

  1. JAVA虚拟机、Dalvik虚拟机和ART虚拟机简要对比

    1.什么是JVM?   JVM本质上就是一个软件,是计算机硬件的一层软件抽象,在这之上才能够运行Java程序,JAVA在编译后会生成类似于汇编语言的JVM字节码,与C语言编译后产生的汇编语言不同的是, ...

  2. 在 C++ 程序中只使用 const 常量而不使用宏常量

    在 C++ 程序中只使用 const 常量而不使用宏常量,即 const 常量完 全取代宏常量. #include <iostream> /* run this program using ...

  3. ubuntu 系统网络突然"网络已禁用"

    sudo service network-manager stop  sudo rm /var/lib/NetworkManager/NetworkManager.state  sudo servic ...

  4. 用cxf生成webservice的java客户端代码

    百度来的: 最近,由于要用到某公司提供的webservice实现的api接口,想到了用cxf的wsdl2java工具来生成客户端程序.(自己写是比较麻烦且费时,so偷懒一下..) 使用步骤如下: 一. ...

  5. PHPOffice下PHPWord生成Word2007(docx)使用方法

    要正常使用,下载依赖包: PhpOffice/Common:https://github.com/PHPOffice/Common Zend/Escaper:https://github.com/ze ...

  6. 用IFrame作预览pdf,图片

    <iframe id="my_img" src="@ViewBag.path" width="100%" frameborder=&q ...

  7. iperf/netperf网络性能测试工具、Wireshark网络包分析工具

    iperf   http://www.linuxidc.com/Linux/2014-05/101160.htm netperf  http://www.linuxidc.com/Linux/2013 ...

  8. mysql中,查看当前数据库下所有的基表,不包括视图

    环境描述: mysql版本:5.5.57-log 操作系统版本:Red Hat Enterprise Linux Server release 6.6 (Santiago) 需求描述: 查看当前使用的 ...

  9. C51中遇到一个有关data与xdata的问题,已解决

    环境: 我在某个C文件定义了一个结构体变量,然后该变量仅仅是在本文件内被一个函数使用,然后又在中断中调用了该函数,目的是改变一个IO口的输出状态,结果运行时怎么也达不到要的效果. struct BE ...

  10. php 如何得到不含前导0的时分秒

    通常我们获取时分秒是用 date("H:i:s") ,得到的效果是这样的 而如果想获取不含前导0的时分秒的话,就需要把前导0去掉. 如何去掉呢?我们来分析一下,07变7,20还是2 ...