下载路径:http://www.sencha.com/products/extjs/download/
解压有20多兆,别怕,真正运行的没这么大。认识下这个包的文件结构吧。
- builds目录是ExtJs压缩后的代码,经过压缩后的代码体积小,加载快。
- docs中是ExtJs文档,包括ExtJs的API,算是开发过程中必备法宝啦吧。
- examples中是官方的演示实例。
- locale是多国语言的资源文件,其中ext-lang-zh_CN.js是简体中文,把他引入页面中,会将提示等显示信息自动转化为中文简体。
- overview是ExtJs的功能简述,其中从整体上阐述啦ExtJs的功能和结构。
- pkgs中是ExtJs各部分功能的打包文件
- resource是ExtJs要用到的图片文件与样式表文件,ExtJs引以为傲的漂亮外观就全部由这个目录中的文件所控制。
- src是未压缩的源代码目录。
- bootstrap.js是ExtJs库的引导文件,通过参数可以自动切换ext-all.js和ext-all-debyg.js。
- ext-all.js文件是ExtJs的核心库,是必须要引入的。
- ext-all-debug.js文件是ext-all.js的调试版,在调试时需要使用的调试版本文件。
ExtJs命名规范
1.类的命名规范
- 类名仅可包含字母、数字。数字大多数情况下不推荐使用,除非是在一些技术术语中。不要使用中划线、下划线等非字符
MyCompany.useful_util.Debug_Toolbar //不要使用下划线 MyCompany.util.Base64 //技术术语可以包含数字
- 类应该通过正确命名的“包(Packages)”来组织。最小包情况时,类名应该紧随最顶层的“名字空间(Namespace)”:
MyCompany.data.CoolProxy //“包”通过“.”来组织 MyCompany.Application //最小包情况
- 最顶层的“名字空间(Namespaces)”和“类名(ClassNames)”应该使用“驼峰命名法(CamelCased)”,其他都是用小写字母:
MyCompany.form.action.AutoLoad
- 非Sencha官方发布的类,不要使用“Ext”作为最顶层名字空间。
- 缩写词也要遵守“驼峰命名法(CamelCased)” :
Ext.data.JSONProxy 替换为Ext.data.JsonProxy MyCompary.parser.HTMLParser 替换为 MyCompany.util.HtmlParser MyCompany.server.HTTP 替换为MyCompany.server.Http
2、源文件的命名规则
- 类名直接映射到文件存储路径,每个类一个文件:
Ext.util.Observable 存储在 path/to/src/Ext/util/Observable.js Ext.form.action.Submit 存储在 path/to/src/Ext/form/action/Submit.js MyOrg.chart.axis.Numeric 存储在 path/to/src/MyOrg/chart/axis/Numeric.js
3、方法和变量的命名规则
- 方法和变量命名同类一样,仅可包含字母、数字。数字大多数情况下不推荐使用,除非是在一些技术术语中。不要使用中划线、下划线等非字符;
- 方法和变量命名应该使用“驼峰命名法(CamelCased)”,缩写词也一样;
encodeUsingMd5() //技术术语可以包含数字 getHTML() //替换为getHtml() getJSONResponse() //替换为getJsonResponse() parseXMLContent() //替换为parseXmlContent() var isGoodName var base64Encoder //技术术语可以包含数字 var xmlReader var httpServer
4、属性的命名规则
- 非静态的类属性命名规则同上;
- 静态的类属性命名全部使用大写字母:
EXT基本方法、属性(onReady、define、create)
onReady:只有在Ext框架全部加载完后才能在客户端的代码中使用Ext,而Ext的onReady正是用来注册在Ext框架及页面的html代码加载完后,所要执行的函数。
调用onReady方法时可以带三个参数,
第一个参数是必须的,表示要执行的函数或匿名函数,
第二参数表示函数的作用域,
第三个参数表示函数执行的一些其它特性,比如延迟多少毫秒执行等,大多数情况下只需要第一个参数即可。
<script type="text/javascript"> function sayHellow() { alert("hi , everyone !"); //可执行 Ext.Msg.alert("title", "hi , everyone !"); //报错,关于呈现Ext元素组件的都只能在onReady中执行。 } sayHellow() // Ext.onReady(sayHellow); </script>
define:创建类,可以继承其他类,也可以被继承
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘ }); //实例化类 var textClass = new TextClass(); //输出属性名 Ext.Msg.alert(‘类属性‘, textClass.A + " " + textClass.B); //textClass.A结果为a,textClass.B结果为b });
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘ }); //创建一个类,继承TextClass Ext.define("TextClass2", { extend: ‘TextClass‘, //继承TextClass C: ‘c‘//TextClass2特有的属性 }) var textClass2 = new TextClass2(); Ext.Msg.alert("TextClass2属性", textClass2.A + " " + textClass2.B + " " + textClass2.C) //输出结果为 a b c });
create :实例化类,在EXTJS4中建议用create方法实例化类
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘ }); var textClass = Ext.create("TextClass") Ext.Msg.alert(‘textClass属性‘, textClass.A + ‘ ‘ + textClass.B) //输出结果为 a b });
EXT基本方法、属性(apply、applyIf、constructor)
ExtJS面向对象 这文中有介绍。
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘, constructor: function (o) { //复制o中的所有属性到自身 Ext.apply(this, o); } }); var textClass = Ext.create("TextClass", { A: ‘A‘, B: ‘B‘, C: ‘C‘ }) Ext.Msg.alert(‘textClass属性‘, textClass.A + ‘ ‘ + textClass.B + ‘ ‘ + textClass.C) //显示 : A B C });
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘, constructor: function (o) { //复制o中的所有属性到自身,如果类中存在同名属性,就不复制 Ext.applyIf(this, o); } }); var textClass = Ext.create("TextClass", { A: ‘A‘, B: ‘B‘, C: ‘C‘ }) Ext.Msg.alert(‘textClass属性‘, textClass.A + ‘ ‘ + textClass.B + ‘ ‘ + textClass.C) //显示 a b C });
EXT基本方法、属性(mixins、statics、config、require)
mixins:类似于面向对象中的多继承
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘ }); //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass2‘, { C: ‘c‘, write: function () { alert(‘A:‘ + this.A + ‘;B:‘ + this.B + ‘;C:‘ + this.C) } }) Ext.define(‘TextClass3‘, { //继承TextClass、TextClass2 mixins: { TextClass: ‘TextClass‘, TextClass2: ‘TextClass2‘ } }) var textClass = Ext.create("TextClass3") textClass.write(); //显示结果:A:a;B:b;C:c });
statics:定义静态变量
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘, statics: { C: ‘C‘ } }); //没有实例化TextClass类 Ext.Msg.alert(‘TextClass类的静态属性C的值是:‘, TextClass.C) //显示结果:C });
config:属性包装器,为属性提供get和set方法
Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A、B Ext.define(‘TextClass‘, { A: ‘a‘, B: ‘b‘, statics: { C: ‘C‘ }, config: { configProperty: ‘how can i get this property‘ } }); var textClass = Ext.create(‘TextClass‘); //通过set方法设置属性的值,注意,包装器会把属性的头字母大写 textClass.setConfigProperty("set this property‘s value"); //通过get方法展示属性值 Ext.Msg.alert(‘configProperty属性的值是:‘, textClass.getConfigProperty()); //显示结果:set this property‘s value });
require:动态加载js文件,这个页面需要用到哪些组件,然后就预先加载,多余不用加载的组件就不管他.提高运行速度.一般写在脚本开始的地方。
Ext.require([ ‘Ext.tab.*‘, ‘Ext.window.*‘, ‘Ext.tip.*‘, ‘Ext.layout.container.Border‘ ]);
EXT对象选择
Ext对象分为3种:htm控件,EXTJS元素,EXTJS组件(html控件--封装-->ExtJs元素--封装-->extjs组件)
- 选择html控件:Ext.getDom(对象的ID)
- 选择EXT元素:Ext.get(对象的ID)
- 选择EXT组件:Ext.getCmp(对象的ID)
1、Ext.getDom和Ext.get方法
<html> <head> <title>Index</title> <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Extjs4/ext-all.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { //通过Ext.get方法获取第一个文本框对象,返回的是Ext元素 Ext.get("text1").set({ value: ‘Ext.get方法获取的Ext元素‘ }); //通过Ext.getDom方法获取第二个文本框对象,返回的是html控件 Ext.getDom("text2").value = "Ext.getDom方法获取的html控件"; //通过Ext.get方法获取第三个文本框对象,返回的是Ext元素,通过Ext元素的dom属性,返回html控件 //注:通过EXT元素的dom属性,可以将EXT元素转换为对应的html控件 Ext.get("text3").dom.value = "Ext.get方法获取的Ext元素,通过dom属性转化为html控件" }); </script> </head> <body> <div id="Ext4-Panel"> 输入框1:<input type="text" id="text1" style="width:400px"/><br /> 输入框2:<input type="text" id="text2" style="width:400px"/><br /> 输入框3:<input type="text" id="text3" style="width:400px"/><br /> <input type="button" id="show" value="展示选择结果" /> </div> </body> </html>
2、Ext.getCmp方法
<html> <head> <title>Index</title> <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Extjs4/ext-all.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { //创建一个panel Ext.create("Ext.panel.Panel", { //id id: ‘myPanel‘, //标题 title: ‘Ext的panel组件‘, //渲染到id为“ExtComponent”的<div>标签 renderTo: ‘ExtComponent‘, //宽 width: 300, //高 height: 300 }) setTimeout(‘Ext.getCmp("myPanel").setTitle("使用getCmp获取组件")‘, 5000); //5秒后标题变为:“使用getCmp获取组件” }); </script> </head> <body> <div id="ExtComponent"> </div> </body> </html>
3、通过CSS语法选择EXT组件
<html> <head> <title>Index</title> <link href="Extjs4/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="Extjs4/ext-all.js" type="text/javascript"></script> <script type="text/javascript"> Ext.onReady(function () { //创建一个panel Ext.create("Ext.panel.Panel", { //标题 title: ‘第一个panel‘, //渲染到id为“myPanel1”的<div>标签 renderTo: ‘myPanel1‘, //宽 width: 300, //高 height: 100, items: [{ //这个panel包含一个textfield组件 xtype: ‘textfield‘, name: ‘name‘, fieldLabel: ‘Name‘ }, { //这个panel包含一个textfield组件 xtype: ‘textfield‘, name: ‘age‘, fieldLabel: ‘Age‘ }] }) //创建一个panel Ext.create("Ext.panel.Panel", { title: ‘第二个panel‘, renderTo: ‘myPanel2‘, width: 300, height: 150, items: [{ //这个panel包含另一个panel xtype: ‘panel‘, height: ‘50‘, items: [{ //被包含的panel包含一个textfield组件 xtype: ‘textfield‘, name: ‘telephone‘, fieldLabel: ‘Telephone‘ }] }, { //这个panel包含一个textfield组件 xtype: ‘textfield‘, name: ‘address‘, fieldLabel: ‘address‘ }] }) var one = Ext.ComponentQuery.query("panel [title=第一个panel]")[0].title; //Ext.Msg.alert("Title", one); //显示结果 : 第一个panel Ext.ComponentQuery.query("textfield")[0].value = "123"; var two = Ext.ComponentQuery.query("textfield")[2].name; //第一个textfield组件并不是标题为name的那个文本框(第三个才是), //这是应为EXT框架会根据需要自动生成一些组件,所以在选择特定组件的时候,最好不要通过索引,而是通过特定的属性 //Ext.Msg.alert("Title", two); //显示结果 : name var three = Ext.ComponentQuery.query(‘textfield[name=name]‘)[0].name; Ext.Msg.alert("Title", three); //显示结果 : name //获取标题为“第二个panel”的panel组件下面的所有textfiled组件 Ext.ComponentQuery.query(‘panel[title=第二个panel] textfield‘) //获取标题为“第二个panel”的panel组件下一层的所有textfiled组件 Ext.ComponentQuery.query(‘panel[title=第二个panel]>textfield‘) }); </script> </head> <body> <div id="myPanel1"> </div> <div id="myPanel2"> </div> </body> </html>
4、up、down、child方法
up:根据CSS语法获取当前组件上层的控件,如果有多个符合条件,只返回第一个
down:根据CSS语法获取当前组件下层的控件,如果有多个符合条件,只返回第一个
child:根据CSS语法获取当前组件下一层的控件,如果有多个符合条件,只返回第一个
up方法:
//获取属性name为telephone的textfield组件 var t = Ext.ComponentQuery.query("textfield[name=telephone]")[0] //获取组件t上面的第一个panel组件 t.up("panel");
child方法:
//获取属性title为"第二个panel"的panel组件 var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0] //获取组件t下面一层的属性name为“address”的textfield组件 t.child("textfield[name=address]");
down方法:
//获取属性title为"第二个panel"的panel组件 var t = Ext.ComponentQuery.query("panel[title=第二个panel]")[0] //获取组件t下面一层的属性name为“address”的textfield组件 //注意,用child方法时无法取到了,因为child方法只能取组件t下面一层的控件 t.down("textfield[name=telephone]");