Ext Js详解指南

什么是Ext JS

走进Ext的世界 Ext JS是一款富客户端开发框架它基于javascript、HTML和CSS开发而成，无需安装任何插件即可在常用浏览器中创建出绚丽的页面效果。

个人总结Ext JS的方法

• 从Extjs的视图学起

例如：窗体、表单、数等等。并且可以掌握调试工具和技巧

• 学习使用API

学会怎么查询以及使用大牛提供的接口解决常见的问题（一般我们用到的效果，大牛们在做框架的时候都想到过）

• 把Extjs的前端可视化的组件与后台连接，进行交互

我们在做各类系统的时候都要跟数据库打交道，在这个阶段主要把各个组件与数据库的交互写清楚

• 掌握理论知识--原理性东西

如：Extjs的继承机制，事件等等

• 官方提供的开发实例

如官方提供的样例掌握

Extjs核心工具方法

一、Extjs核心工具方法
1、Ext.onReady
   Ext.onReady在DOM模型加载完毕后才进行操作。
   优点：无需像onload事件那样，等待页面的所有资源都加载完毕后才进行操作。
   "onReady方法是Ext.Loader.onReady()方法的别名"
   其语法如下：
   Ext.onReady(Object fn,Objet scope,Objet options)
   其中：
       fn:指定Ext JS和HTML页面加载完成后要执行的方法，fn参数类型为对象（必传参数）；
       scope:指定执行该方法的范围（可选参数）；
       options：指定执行一些附加选项，比如delay等（可选参数）。

2、Ext.create
   Ext.create方法是创建对象的方法，
   "在Ext JS 4版本之前，一直使用new关键字创建对象-- new classname([config])"
   其语法如下：
   Ext.create( String className, Object args)
   其中：className指定要创建对象的类名，可以是类的全名、别名或者备用名；
         args是一个JavaScript对象，用于向新生成的对象传入构造参数值（也称为配置选项，即为config属性指定选项传入参数值）,类型为对象。

二、Ext JS 4 语法
1、配置对象
   config:用于为该类指定配置选项，Ext JS会自动为config指定的选项添加setter和getter方法。

2、关于xtype
   定义xtype来指定该位置使用什么组件。
   定义xtype，一般使用组件的别名。

3、使用Ext.widget或者Ext.createWidget创建对象
  Ext.widget的作用是使用别名来创建对象。 Ext.widget =Ext.createWidget;
  其语法如下：
  Ext.widget( classname,[config] )
  其中： classname是对象的别名；
         configs是可选参数，为对象的配置对象（config options）,类型为对象。

4、使用Ext.ns或者Ext.namespace定义命名空间
   Ext.namespace()方法用于创建一个或多个命名空间，命名空间可用于限定函数、类的范围和作用域，可以      很好的解决二者的同名冲突。
   很多时候都会使用命名空间来组织相关类和其他类。在Extjs中，使用Ext.namespace方法可创建命名空间
   其语法如下：
   Ext.namespae(namespace1,namespae2,...)
   其中namespace1、namespace2都是字符串数据，是命名空间的名字

5、使用Ext.define定义新类
    Ext.define()方法和Ext.extend()方法都用于自定义类。
    "Ext.define()方法相当于Ext.ClassManager.create()方法的别名"
    "在Ext JS 3版本，定义新类使用的是Ext.extend方法（不推荐使用）"
    其语法如下：
    Ext.define( String className, Object properties,[Function callback] );
    其中：className:用于执行自定义的类名（推荐采用与java类名相同的命名规则）；
          properties：新类的配置对象，对象里包含了类的属性集对象（用于为该类定义属性、方法）。
          callback：回调函数，当类创建完成后执行该函数（用于指定该类创建成功的回调函数）。
    注意：properties该对象可以指定任何合法的属性，以下是几种具有特殊意义的属性。
          Ⅰ.self:引用当前类本身
          Ⅱ.alias:为该类定义别名
          Ⅲ.alternateClassName:为该类定义可选的类名
          Ⅳ.config:用于为该类指定配置选项，Ext JS会自动为config指定的选项添加setter和getter方法
          Ⅴ.extend:用于指定该类继承的父类
          （还可以通过constructor为该类指定构造器）
          Ⅵ.inheritableStatics:与statics属性相同，也用于为该类定义静态方法和静态属性，该属性的              定义的静态方法和静态属性可以被子类继承
          Ⅶ.mixins:用于列出所有要被混入的类
          Ⅷ.override：用于注定要覆盖的类
          Ⅸ.requires:用于列出在实例化该类之前，必须预先加载的类
          Ⅹ.singleton:如果该属性被设为true,则该类的实例将是单例的
          ⅩⅠ.statics:为该类定义静态方法和静态属性
          ⅩⅡ.uses:用于列出必须与该类同时使用的类

6、使用Ext.defer方法指定延迟执行的函数
   Ext.defer()用于指定延迟执行的函数
   其语法如下：
   Ext.defer(Function fn,Number millis,[Object scope],[Array args])
   其中：
       fn参数执行需要延迟执行的函数；
       millis:指定延迟多少毫秒后执行fn函数；
       scope参数用于指定执行fn函数的范围；
       args用于执行传入fn函数的参数；  

 7、Ext.apply和Ext.applyIf方法
    Ext.apply()及Ext.applyIf()方法都是用于把一个对象中的属性复制到另一个对象中。
    共同点：都用于实现属性复制。
    不同点：
    Ext.apply()将会覆盖目标对象中的属性；
    Ext.applyIf()只复制目标对象中没有、而源对象中有的属性不会发生属性覆盖。
    其语法如下：
    Ext.apply()方法的语法格式为：
     Ext.apply(Object object, Object config,Object defaults)
     作用：
     把config、defaults两个对象的属性复制到objet中，但是当config、default两个对象的属性值发生冲        突时，config的属性值取胜。

 8、Ext.isXxx方法---用于判断是否为某某对象
    Ext.isXxx()方法代表系列的方法，它们都用于判断是否为某某对象，isXxx()方法总是返回Boolean值。

 9、Ext.each和Ext.iterate方法
    Ext.each()方法用于遍历数组，它是Ext.Array.each()方法的别名。
    Ext.iterate()方法相当于Ext.Array.each()方法和Ext.Object.each()方法“综合体”，
    当被遍历的数据是数组时，Ext.iterate()方法底层调用Ext.Array.each()方法进行遍历；
    当被迭代的数据是对象时，Ext.iterate()方法底层调用Ext.Object.each()方法进行遍历；

三、Ext JS扩展的工具方法---更多方法参考：Ext JS API文档
   Ext JS扩展的所有工具方法都直接位于Ext命名空间下。
Ⅰ、为Array扩展的工具方法---Ext.Array工具类
   JavaScript数组用做栈的两个方法如下：
   ①.push(ele):元素入栈，返回入栈后数组的长度。
   ②.pop()：元素出栈，返回出栈的数组元素

   JavaScript数组作为队列使用的两个方法如下：
   ①.unshift(ele):元素入队列，返回入对列后数组的长度。
   ②.shift()：元素出队列，返回出队列的数组元素。

 Ⅱ、为Date扩展的工具方法---Ext.Date工具类
   Ext.Date为操作Date对象提供了大量的工具方法
   例如：Ext.Date.format()、Ext.Date.between()两个方法

 Ⅲ、为Function扩展的工具方法---Ext.Function工具类
   Ext.Function为JavaScript函数新增了大量工具方法

 Ⅳ、为Number扩展的工具方法---4个工具类方法
   Ext.Number为JavaScript的数值类型的值
   Ext.Number.constrain()工具方法---Ext.Number.constrain(20，10，30) //20截取傲10~30范围内
   Ext.Number.from()工具方法---Ext.Number.from("abc","20") //字符串abc转换为数值
  Ext.Number.snap()工具方法---Ext.Number.snap(23,7,10,20) //返回离23最近的7的倍数(必须在10~30之间)
  Ext.Number.snap()工具方法：作用--先获取距离指定数值最近的、特殊数值的倍数，然后将得到的数值截取   到指定范围之内。
      Ext.Number.toFixed()工具方法---Ext.Number.toFixed(3.2545,1) //3.2545保留1位小数点

    Ⅴ、为Object扩展的工具方法---Ext.Object工具类
        javaScript的对象不仅仅可以作为对象使用，还可以作为Java Map集合使用，javascript对象的每个属性名、属性值就相当于Map的key-value对（键值对）
       例如：Ext.Object.each()、Ext.Object.toQueryString()、Ext.Object.fromQueryString()、Ext.Object.getKeys()、Ext.Object.getValues()等等

     Ⅵ、为String扩展的工具方法---Ext.String工具类
         Ext.String提供了大量工具方法来操作字符串，这些工具方法可以进一步增强字符串的功能
       Ext.String.format()方法比较实用，用于将字符串中的{0}、{1}、{2}....占位符替换成实际的值。

     Ⅶ、Ext.JSON方法
       JSON是一种非常有用的轻量级数据交换格式。
       Ext.JSON类提供了3个工具方法来完成javascript对象与JSON字符串的相互转化。
       Ext.JSON.encode()工具方法---用于把javascript对象或数组转换为JSON字符串
       Ext.JSON.encode()方法的别名是： Ext.encode()可直接使用
       Ext.JSON.decode()工具方法---用于把JSON字符串恢复成javascript数组或对象
       Ext.JSON.decode()方法的别名是： Ext.decode()可直接使用
       Ext.JSON.encodeDate()工具方法---用于编码一个日期。将返回的实际字符串，插入到JSON字符串作为        文本表达式。返回的默认格式是："yyyy-mm-ddThh:mm:ss"
       Ext.JSON.encodeValue()工具方法---用于把javascript对象或数组转换为JSON字符串

Ext JS所有界面组件

1、使用Ext.container.Container--创建容器
2、使用Ext.panel.Panel--创建面板
3、使用Ext.toolbar.ToolBar--创建工具条
4、使用Ext.tab.Panel--创建Tab面板
5、使用Ext.container.Viewport--整体布局
6、使用Ext.window.Window--创建窗口
7、使用Ext.window.MessageBox--创建对话框
8、使用Ext.menu.CheckItem、Ext.menu.ColorPicker、Ext.menu.DatePicker实现特殊菜单项
9、使用Ext.Ation--创建按钮
10、使用Ext.ProgressBar--创建进度条
11、使用Ext.slider.Single--创建滑动条
12、使用Ext.Img--创建图片
13、使用Ext.Editor--创建编辑器
14、使用Ext.tip.ToolTip--创建提示
15、使用Ext.QuickTipManager和Ext.tip.QuickTip--创建提示
16、使用Ext.ux.GMapPanel实现Google地图
17、使用Ext.form.field.ComboBox--创建复合框
18、使用Ext.data.Store与Ext.data.Model管理数据
19、使用Ext.data.Proxy.Proxy和Ext.data.reader.Reader读取数据
20、使用Ext.grid.Panel--生成表格
21、使用Ext.grid.column.Column-定义列
22、使用Ext.grid.Panel显示远程数据
23、使用Ext.tree.Panel生成数
------------------------------------------------------------------------------------------------

Ext JS所有界面组件都继承了Ext.Component,
Ext.component的子类：Ext.container.Container则是其他组件的容器，用于盛装其他组件。

一、使用Ext.Component
 Ext.Component是最普通、没用额外附加行为的组件，该组件原本是"一无所有"的区域----空白的区域。
 样例：
 <script type="text/javascript">
//创建comp容器对象
var comp = Ext.create('Ext.Component', {
    html: 'Hello world!',
    width: 300, //宽度
    height: 200, //高度
    padding: 20, //内边距
    style: { //设置样式
        color: '#FFFFFF',
        backgroundColor:'#000000'
    },
    renderTo:Ext.getBody()  //指定将该组件追加到<body.../>元素中
});
   copm.center(); //使用容器居中
 </script>

二、使用Ext.container.Container创建容器 --- 可以盛装其他组件
   Ext.container.Container代表一个空白的容器，
   使用场景：需要现将多个组件"组合"在一起，再将他们放在页面上显示出来。
   样例：
<script type="text/script">
  // 显式创建一个容器
Ext.create('Ext.container.Container', {
    //指定布局方式
    layout: {
        type: 'hbox'
    },
    width: 400,
    renderTo:Ext.getBody(),
    border: 1,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    // 指定对该容器中所有添加项进行默认设置
    defaults: {
        labelWidth: 80,
        // 隐式创建容器通过指定的xtype
        xtype: 'datefield',
        flex: 1,
        style: {
            padding: '10px'
        }
    },
    //指定该容器包含的组件
    items: [
        //第2个组件，xtype是datefield，表明是一个日期选择器
        {
        xtype: 'datefield',
        name: 'startDate',
        fieldLabel: 'Start date' //开始日期
    },{
        xtype: 'datefield',
        name: 'endDate',
        fieldLabel: 'End date' //结束日期
    }]
});
</script>

三、使用 Ext.panel.Panel --- 最常用的的容器类之一，Ext.window.Window和 Ext.tab.Panel、Ext.form.Panel。
    Ext.panel.Panel继承了Ext.container.Container
    Ext.panel.Panel容器的功能更加丰富，它可以添加标题、工具条等等，更多参照API
    样例：
    <script type="text/script">
Ext.onReady(funtion(){

 // 创建Ext.panel.Panel容器对象
var con = Ext.create('Ext.panel.Panel', {
 //指定布局方式
    layout: {
        align: 'center'
    },
    title:'查询图书'
    height:280, //指定高度
    width: 400, //指定宽度
    renderTo:Ext.getBody(),
    border: 1,
    style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
    // 指定对该容器中所有添加项进行默认设置
    defaults: {
        labelWidth: 80,
        flex: 1,
        style: {
            padding: '10px'
        }
    },
    //为该Panel设置工具按钮
    //无须指定xtype属性，默认就是tools值，即工具按钮
    tools:[
      {
     //指定刷新工具按钮
     type:'refresh',
     //工具提示
     tooltip:'刷新页面',
     //单击该工具按钮的事件处理函数
     handler:function(event,toolEl,panel)
     {
     alert("用户刷新数据");
     }
     },
      {
     //指定保存工具按钮
     type:'save',
     //工具提示
     tooltip:'保存数据',
     //单击该工具按钮的事件处理函数
     handler:function(event,toolEl,panel)
     {
     alert("用户保存数据");
     }
     }
     ],
    //指定该容器包含的组件
    items: [
        //第1个组件，没有指定xtype，默认是panel,表明嵌套了一个Panel
    {
        title:'出版社信息'
        height: 120, //指定高度
        fieldLabel: 'Start date' //开始日期
    },{
        xtype: 'datefield',
        name: 'endDate',
        fieldLabel: 'End date' //结束日期
    }]
});

});
</script>

四、使用Ext.form.Panel--表单容器

Ext.form.Panel表单面板各组件介绍

1、Ext.form.FormPanel支持的主要表单组件
ExtJS表单组件 说明 Xtype类型
Ext.form.field.CheckBox 复选框 checkboxfield
Ext.form.CheckBoxGroup 复选框组 checkboxgroup
Ext.form.field.ComboBox 下拉列表框 combo
Ext.form.field.Date 日期选择框 datefield
Ext.form.field.Display 文本显示组件 displayfield
Ext.form.field.FieldContainer 字段容器 fieldcontainer
Ext.form.field.FieldSet 字段集 fieldset
Ext.form.field.Hidden 隐藏域 hiddenfield
Ext.form.field.HtmlEditer HTML文本编辑器 htmleditor
Ext.form.Label 标签字段 label
Ext.form.field.Number 数字输入框 numberfield
Ext.form.field.Radio 单选框 radio
Ext.form.RadioGroup 单选框组 radiogroup
Ext.form.field.Spinner 微调组件 spinnerfield
Ext.form.field.TextArea 多行文本框 textareafield
Ext.form.field.Text 单行文本框 textfield
Ext.form.field.Time 时间选择框 timefield
Ext.form.field.Trigger 触发器按钮文本框 triggerfield
Ext.form.field.File 文本框上传字段 filefield
2、Ext.form.Panel主要配置项目表
配置项 类型 说明
buttons Array 一个按钮（Ext.button.Button）配置对象数组，按钮将被添加到表单页脚中
layout String 表单布局
minButtonWidth Number 表单按钮的最小宽度，默认为75px
pollForChanges Boolean 是否循环检查表单值的变化
pollInterval Number 循环检查表单值的时间间隔，默认为500ms
items Mixed 一个子元素或子元素的数组
title String 表单标题
3、Ext.form.FormPanel常用方法表
方法名 说明
checkChange:void 强制检查每个表单字段是否发生了变化
getForm():Ext.form.BasicForm 获取表单面板对应的基本表单对象
load(Object options):void 加载表单内容
startPolling(Number interval):void 开始循环检查表单值是否发生了变化
参数说明：
interval：循环检查的时间，单位ms
 
stopPolling:void 停止startPolling启动的内置任务
submit(Object options):void 提交表单内容
4、Ext.form.field.Base主要配置项目表
配置项 类型 说明
dirtyCls String 设置表单值被修改后的样式
fieldCls String 设置表单字段的样式，默认为“x-form-field”
focusCls String 设置表单字段获得焦点时的样式，默认为“x-form-focus”
id String 控件的唯一标识，默认系统自动生成一个唯一标识
inputId String 这个id将被应用于生成的input元素，默认情况下这个id自动生成，如果手工配置id则需保证这个id的唯一性
invalidText String 设置表单值无效且并没有提供信息时的显示文字
inputType String 字段类型，默认为text
name String 字段名，默认为undefined
readOnly Boolean 设置字段是否只读，默认为false。
Mixin:Ext.form.field.Field
disabled Boolean true则禁用组件，默认为false。禁用状态下的组件将不被提交
submitValue Boolean 设置表单字段非禁用状态下是否提交表单值，默认为true
validateOnChange Boolean 设置是否在值发生变化时立刻校验的有效性，默认为true
value Mixed 字段的初始化值
Mixing:Ext.form.Labelable
activeError String 如果设置该值，则组件第一次被渲染时该值将被作为错误信息展示，默认为undefined，组件创建之后可以使用setActiveError和unsetActiveError进行修改
activeErrorTpl Ext.XTemplate 错误信息模板
autoFitErrors Boolean 设置为true则自动调节组件体范围，以便在组件范围内显示“side”或“under”状态的错误信息，默认为true
fieldLabel String 设置字段标签，它将与labelSeparator一起被添加，它的位置尺寸决定于labelAlign，labelWidth和labelPad配置项，默认为undefined
hideEmptyLabel Boolean 设置为true则完全隐藏内容为空的标签
hideLabel Boolean 设置为true则完全隐藏表单标签（fieldLabel和labelSeparator），默认为false
labelAlign String 设置表单标签filedLabel的位置，
有效值：left：
标签在字段左边。top：
标签在字段上面。
right：标签在字段右边。
 
labelPad Number 设置表单标签与表单字段值之间的空白间距，默认为5px
labelSeparator String 设置表单标签与表单字段之间的分隔符
labelStyle String 设置一个直接应用于标签元素的样式字符串，默认为undefined
labelWidth Number 设置表单标签宽度，仅当labelAlign设置为“left”或“right”时生效，默认为100px
labelableRenderTpl Array/String/Ext.Template 表单标签模板
msgTarget String 设置错误信息提示位置，
有效值包括：
qtip：显示一个浮动的提示消息
title：显示一个浏览器浮动提示消息
under：在字段下面显示一个提示消息
side：在字段右边显示一个提示消息
none：不显示提示消息
[element id]：直接将错误消息添加到指定元素的innerHTML属性
 
preventMark Boolean true则不显示错误消息，默认为false

欢迎交流，进入博客网站：www.wangsong520.com进行留言交流，并且里面有更多知识分享！