认识ExtJs的开发包
下载路径：/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()
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', {
//实例化类
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', {
//创建一个类，继承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', {
var textClass = Ext.create("TextClass")
Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B)
//输出结果为 a b
EXT基本方法、属性（apply、applyIf、constructor）
&这文中有介绍。&
Ext.onReady(function () {
//创建一个类，类名：TextClass，具有两个属性：A、B
Ext.define('TextClass', {
constructor: function (o) {
//复制o中的所有属性到自身
Ext.apply(this, o);
var textClass = Ext.create("TextClass", {
Ext.Msg.alert('textClass属性', textClass.A + ' ' + textClass.B + ' ' + textClass.C)
//显示 ： A B C
Ext.onReady(function () {
//创建一个类，类名：TextClass，具有两个属性：A、B
Ext.define('TextClass', {
constructor: function (o) {
//复制o中的所有属性到自身,如果类中存在同名属性，就不复制
Ext.applyIf(this, o);
var textClass = Ext.create("TextClass", {
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', {
//创建一个类，类名：TextClass，具有两个属性：A、B
Ext.define('TextClass2', {
write: function () {
alert('A:' + this.A + ';B:' + this.B + ';C:' + this.C)
Ext.define('TextClass3', {
//继承TextClass、TextClass2
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', {
statics: {
//没有实例化TextClass类
Ext.Msg.alert('TextClass类的静态属性C的值是：', TextClass.C)
//显示结果：C
config：属性包装器，为属性提供get和set方法&
Ext.onReady(function () {
//创建一个类，类名：TextClass，具有两个属性：A、B
Ext.define('TextClass', {
statics: {
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方法
&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控件"
&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="展示选择结果" /&
2、Ext.getCmp方法
&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: 'myPanel',
title: 'Ext的panel组件',
//渲染到id为&ExtComponent&的&div&标签
renderTo: 'ExtComponent',
width: 300,
height: 300
setTimeout('Ext.getCmp("myPanel").setTitle("使用getCmp获取组件")', 5000);
//5秒后标题变为：&使用getCmp获取组件&
&div id="ExtComponent"&
&3、通过CSS语法选择EXT组件
&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,
//这个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,
//这个panel包含另一个panel
xtype: 'panel',
height: '50',
//被包含的panel包含一个textfield组件
xtype: 'textfield',
name: 'telephone',
fieldLabel: 'Telephone'
//这个panel包含一个textfield组件
xtype: 'textfield',
name: 'address',
fieldLabel: 'address'
var one = ponentQuery.query("panel [title=第一个panel]")[0].
//Ext.Msg.alert("Title", one); //显示结果 : 第一个panel
ponentQuery.query("textfield")[0].value = "123";
var two = ponentQuery.query("textfield")[2].
//第一个textfield组件并不是标题为name的那个文本框（第三个才是），
//这是应为EXT框架会根据需要自动生成一些组件，所以在选择特定组件的时候，最好不要通过索引，而是通过特定的属性
//Ext.Msg.alert("Title", two); //显示结果 : name
var three = ponentQuery.query('textfield[name=name]')[0].
Ext.Msg.alert("Title", three); //显示结果 : name
//获取标题为&第二个panel&的panel组件下面的所有textfiled组件
ponentQuery.query('panel[title=第二个panel] textfield')
//获取标题为&第二个panel&的panel组件下一层的所有textfiled组件
ponentQuery.query('panel[title=第二个panel]&textfield')
&div id="myPanel1"&
&div id="myPanel2"&
4、up、down、child方法
up：根据CSS语法获取当前组件上层的控件，如果有多个符合条件，只返回第一个
down:根据CSS语法获取当前组件下层的控件，如果有多个符合条件，只返回第一个
child:根据CSS语法获取当前组件下一层的控件，如果有多个符合条件，只返回第一个
//获取属性name为telephone的textfield组件
var t = ponentQuery.query("textfield[name=telephone]")[0]
//获取组件t上面的第一个panel组件
t.up("panel");
&child方法：
//获取属性title为"第二个panel"的panel组件
var t = ponentQuery.query("panel[title=第二个panel]")[0]
//获取组件t下面一层的属性name为&address&的textfield组件
t.child("textfield[name=address]");
&down方法：
//获取属性title为"第二个panel"的panel组件
var t = ponentQuery.query("panel[title=第二个panel]")[0]
//获取组件t下面一层的属性name为&address&的textfield组件
//注意，用child方法时无法取到了，因为child方法只能取组件t下面一层的控件
t.down("textfield[name=telephone]");
& & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & .
阅读(...) 评论()