ExtJs中xtype含义和对照表

序言
根据我在论坛上的观察,xtype用起来的时候疑惑会比较多。甚至有些人根本忽略xtype,或者不清楚它是什么。所以我决定阐述一下这个xtype的概念。
定义
xtype就是一个代表类(Class)的标识名字。
譬如,你有这个类,名字是Ext.ux.MyGrid。正常情况下你需要用这个名字来实例化这个类(创建类的对象)。
除了类名外,你还可以这样登记类的xtype:
Ext.reg(‘mygrid’, Ext.ux.MyGrid);
其中xtype 是 mygrid 而类名的一般形式是Ext.ux.MyGrid。上面的语句登记了新的xtype,换种说法说,xtype mygrid 与类 Ext.ux.MyGrid是连在一起的。
到底有什么好处?
试想一下,你手头上的是一个大型的项目,为了响应用户的操作,程序里面包含者大量的对象(windows、forms、grids)。用户点击图标或按钮,就会新建一个窗体,窗体里面又有grid,最终在屏幕上渲染出来。
嗯,我们回到Ext2.x之前的编码,那时候我们实例化所有对象是页面第一次加载后就进行的(程序代码第一次的运行)。在客户端内存中,Ext.ux.MyGrid类的对象已经存在,等待用户的点击。 同样是这个grid,假设你上百个的实例,…是多么浪费宝贵的资源啊!很多grid其实用户未必会点击让它出现。
延时实例化
如果你使用xtype,那么在内存中的仅仅是一个配置项对象,像:

消耗没有复杂的实例对象来得大。

嗯,用户点击按钮或图标会怎么样呢?Ext会辨认出它是一个准备要渲染的grid但不立刻实例化,Ext在ComponentMgr的帮忙下明白这么一回事:“如果我要实例化xtype mygrid的对象,我就知道要创建的实际是类Ext.ux.MyGrid的对象”。即如下列代码:

等价于:

然后实例化grid,进行渲染和显示。谨记:需要的时候才实例化

 

xtype            Class

————-    ——————

box              Ext.BoxComponent 具有边框属性的组件

button           Ext.Button 按钮

colorpalette     Ext.ColorPalette 调色板

component        Ext.Component 组件

container        Ext.Container 容器

cycle            Ext.CycleButton

dataview         Ext.DataView 数据显示视图

datepicker       Ext.DatePicker 日期选择面板

editor           Ext.Editor 编辑器

editorgrid       Ext.grid.EditorGridPanel 可编辑的表格

grid             Ext.grid.GridPanel 表格

paging           Ext.PagingToolbar 工具栏中的间隔

panel            Ext.Panel 面板

progress         Ext.ProgressBar 进度条

splitbutton      Ext.SplitButton 可分裂的按钮

tabpanel         Ext.TabPanel 选项面板

treepanel        Ext.tree.TreePanel 树

viewport         Ext.ViewPort 视图

window           Ext.Window 窗口

工具栏组件有

—————————————

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 工具栏文本项

表单及字段组件包含:

—————————————

form             Ext.FormPanel Form面板

checkbox         Ext.form.Checkbox checkbox录入框

combo            Ext.form.ComboBox combo选择项

datefield        Ext.form.DateField 日期选择项

field            Ext.form.Field 表单字段

fieldset         Ext.form.FieldSet 表单字段组

hidden           Ext.form.Hidden 表单隐藏域

htmleditor       Ext.form.HtmlEditor html编辑器

numberfield      Ext.form.NumberField 数字编辑器

radio            Ext.form.Radio 单选按钮

textarea         Ext.form.TextArea 区域文本框

textfield        Ext.form.TextField 表单文本框

timefield        Ext.form.TimeField 时间录入项

trigger          Ext.form.TriggerField 触发录入项

Ext常用属性、方法小结

一、Ext

1.1  Ext.isEmpty(v, allowBlank)  //是否为空[链接]

1.2  Ext.isArray(v)     //是否为数组集合

1.3  Ext.isPrimitive(v)    //是否是基本数据类型String/Number/Boolean

1.4  Ext.isFunction(v)    //是否是函数

1.5  Ext.isNumber(v)     //是否是数字

1.6  Ext.isString(v)    //是否是字符串

1.7  Ext.isBoolean(v)   //是否是bool值

1.8  Ext.isIE/isIE6/isIE7/isIE8…  //判断浏览器

1.9  Ext.isWindows/isLinux/isMac/isAir  //判断平台(操作系统)

1.10  Ext.isDefined    //对象是否已经定义

1.11  Ext.id(el,prefix)  //返回唯一的id值,el位元素Id,prefix为前缀

1.12  Ext.urlEncode(o, pre)  //将JSON数据转换URL参数串,如{a:1,b:2} => a=1&b=2

1.13  Ext.urlDecode(string, overwrite)  //将url参数列表转换成json格式数据,overwrite如果为true,则后面的同名参数值覆盖前面的同名参数值(默认为false即不覆盖而以数组形式返回)

1.15  Ext.each(array, fn, scope)  //遍历数组,例:Ext.each([1,2,3],function(value,index,a){ //index:索引号,0开始  value:当前值 a:数组引用 });

1.16  Ext.encode(o)    //将对象转换成json字符串,详细说明和用法:这里

1.17  Ext.decode(o)    //将json字符串转换成对象

[Ext-more.js]

1.18  Ext.combine()  //数组合并

1.19  Ext.num(value,defaultValue)  //如果是数字,直接返回本身,否则返回默认值,注意”5″这里也会返回默认值的

1.20  Ext.copyTo(dest, source, names)  //拷贝source中names属性列表至dest中

1.21  Ext.unique(arr)   //剔除数组中重复的元素,让数组每个元素保持唯一

1.22  Ext.clean(arr)     //复制数组?!

1.23  Ext.flatten(arr)   //将多维数组转换成一维数组

1.24  Ext.min(arr, comp)  //查找数组中最小的元素

1.25  Ext.max(arr, comp)  //查找数组中最大的元素

1.26  Ext.mean(arr)     //计算数组元素平均值(总和除以个数)

1.27  Ext.partition(arr, truth)  //根据arr元素的bool值拆分成新的二维数组并返回 例1:Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]] 例2:Ext.partition(arr,function(val){ return val == “class1” });

1.28  Ext.invoke(arr, methodName,/*args…*/)  //执行arr数组中对象的methodName方法,args为方法的参数,返回执行结果数组

1.29  Ext.pluck(arr, prop)  //返回数组中属性名(property name)等于prop的值的新数组 Ext.pluck(arr, “className”); => [arr1.className,arr2.className]

1.30  Ext.zip({Arrays|NodeLists},{Function}) //压缩多个数组为一个数组, Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]],支持Function自定义合并

1.31  Ext.type(object)  //返回对象的类型:string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace

二、Ext.util.Format

2.1  Ext.util.Format.capitalize(value);  //首字母大写
2.2  Ext.util.Format.ellipsis(value, len, word);   //从字符串开始处截取len长度显示,超过部分用…表示;word为布尔值,为true时在前面截取的基础上再从’ ‘、’.’、’!’、’?’关键字处截取前面(len),ellipsis(“abcde.fghijkl”,10,true)返回abcde
2.3  Ext.util.Format.htmlEncode(value);   //HTML编码,将& <  >  “替换为&amp;&lt;&gt;&quot;
2.4  Ext.util.Format.htmlDecode(value);   //HTML解码,与上面相反
2.5  Ext.util.Format.trim(value);       //截取字符串左右的空格
2.6  Ext.util.Format.substr(value, start, length);   //从value指定的start位置开始截取length长度的子串返回
2.7  Ext.util.Format.lowercase(value);        //转换大写
2.8  Ext.util.Format.uppercase(value);       //转换小写
2.9  Ext.util.Format.stripTags(v);          //去除HTML标签:/<\/?[^>]+>/gi
2.10  Ext.util.Format.usMoney(v);       //转换到’$’符号的货币形式
2.11  Ext.util.Format.date(v, format);    //格式化日期输出,format默认格式”m/d/Y”
2.12  Ext.util.Format.round(value, precision);  //四舍五入,precision指精确位数
2.13  Ext.util.Format.number(v, format);    //格式化数字显示
2.14  Ext.util.Format.nl2br(value);     //将字符串中的’\n’替换成'<br />’
2.15  Ext.util.Format.fileSize(value);    //将字节数转成更大的单位KB和MB显示,fileSize(1024) = 1KB
2.16  Ext.util.Format.defaultValue(value, defaultValue);  //如果value未定义或为空字符串则返回defaultValue
2.17  Ext.util.Format.stripScripts(v);   //去除脚本标签
2.18  Ext.util.Format.undef(value);    //如果value未定义,返回空字符串,反之返回value本身

 

三、扩展JS原有对象

3.1  String

3.1.1  .format(format)  //和C#里面是一样的用法

3.1.2  .toggle(value, other)  //交换值,如果当前值等于value,则被赋值other

3.2  Array

3.2.1  .indexOf(o)  //返回元素o在数组ArrayObject中的位置,找不到返回-1

3.2.2  .remove(o)  //从数组ArrayObject删除元素o

3.3  Function

3.3.1  .createInterceptor(fcn, scope)  //创建阻断方法,如果fcn返回false,原方法将不会被执行,参见这里

3.3.2  .createCallback(/*args…*/)   //创建回调,以无参的函数作为参数,但是现有的方法已经具有了参数,如果直接写上可以用这个来创建一个回调,类似于function(){ //实际的带参调用 } ,见这里1这里2

3.3.3  .createDelegate(obj, args, appendArgs) //创建委托,与上面相比,自己可以访问obj中的属性和方法,见这里

3.3.4  .defer(millis, obj, args, appendArgs)  //定时执行,隔millis毫秒后执行原方法,参见这里

3.3.5  .createSequence(fcn, scope)    //Ext-more.js中,创建组合方法,执行原方法+fcn,参见这里

 

四、 其他

4.1  表单

4.1.1  一次取得表单所有的表单元素key/value集合

form1.form.getValues()  //form1为Ext.FormPanel,例如:

form1.form.setValues(values)     //form1.form.setValues({id:1,name:’aabbcc’}) 赋值

4.1.2  表单元素取值赋值一次取得

4.1.2.1  form1.form.findField(‘TextBox’).getValue()

4.1.2.2  form1.form.getValues().TextBox

4.1.2.3  form1.form.getFieldValues().TextBox

4.2  切换皮肤

Ext.util.CSS.swapStyleSheet(“theme”, “resources/css/ext/xtheme-orange.css”);    //注意路径

 

利用XPath读取Xml文件

XML 文档对象模型 (DOM) 包含的方法使您可以使用 XML 路径语言 (XPath) 浏览功能查询 DOM 中的信息。 可以使用 XPath 查找单个特定节点,或查找与某个条件匹配的所有节点。

XPath 选择方法

如果不使用 XPath,则检索 DOM 中的一个或多个节点将需要大量导航代码。 而使用 XPath 只需要一行代码。 DOM 类提供两种 XPath 选择方法。 SelectSingleNode 方法返回符合选择条件的第一个节点。 SelectNodes 方法返回包含匹配节点的 XmlNodeList。

下面的示例显示一个 XPath 查询,该查询返回包含书作者 Smith 的所有节点。

XPath 表达式中的命名空间

XPath 表达式可以包含命名空间。 使用 XmlNamespaceManager 支持命名空间解析。 如果 XPath 表达式包含前缀,前缀和命名空间 URI 对必须添加到 XmlNamespaceManager,并且 XmlNamespaceManager 传递给 SelectNodes(String, XmlNamespaceManager) 或 SelectSingleNode(String, XmlNamespaceManager) 方法。

输入

如果大家还是不太明白的话,就看看下面的。下面引用Dragon-China博客中一篇文章。
之所以要引入XPath的概念,目的就是为了在匹配XML文档结构树时能够准确地找到某一个节点元素。可以把XPath比作文件管理路径:通过文件管理路径,可以按照一定的规则查找到所需要的文件;同样,依据XPath所制定的规则,也可以很方便地找到XML结构文档树中的任何一个节点.

不过,由于XPath可应用于不止一个的标准,因此W3C将其独立出来作为XSLT的配套标准颁布,它是XSLT以及我们后面要讲到的XPointer的重要组成部分。

在介绍XPath的匹配规则之前,我们先来看一些有关XPath的基本概念。

首先要说的是XPath数据类型。XPath可分为四种数据类型:

  1. 节点集(node-set)
    节点集是通过路径匹配返回的符合条件的一组节点的集合。其它类型的数据不能转换为节点集。
  2. 布尔值(boolean)
    由函数或布尔表达式返回的条件匹配值,与一般语言中的布尔值相同,有true和false两个值。布尔值可以和数值类型、字符串类型相互转换。
  3. 字符串(string)
    字符串即包含一系列字符的集合,XPath中提供了一系列的字符串函数。字符串可与数值类型、布尔值类型的数据相互转换。
  4. 数值(number)
    在XPath 中数值为浮点数,可以是双精度64位浮点数。另外包括一些数值的特殊描述,如非数值NaN(Not-a-Number)、正无穷大infinity、负无 穷大-infinity、正负0等等。number的整数值可以通过函数取得,另外,数值也可以和布尔类型、字符串类型相互转换。

其中后三种数据类型与其它编程语言中相应的数据类型差不多,只是第一种数据类型是XML文档树的特有产物。

另外,由于XPath包含的是对文档结构树的一系列操作,因此搞清楚XPath节点类型也是很必要的。回忆一下第二章中讲到的XML文档的逻辑结构,一个XML文件可以包含元素、CDATA、注释、处理指令等逻辑要素,其中元素还可以包含属性,并可以利用属性来定义命名空间。相应地,在XPath中,将节点划分为七种节点类型:

  1. 根节点(Root Node)
    根节点是一棵树的最上层,根节点是唯一的。树上其它所有元素节点都是它的子节点或后代节点。对根节点的处理机制与其它节点相同。在XSLT中对树的匹配总是先从根节点开始。
  2. 元素节点(Element Nodes)
    元素节点对应于文档中的每一个元素,一个元素节点的子节点可以是元素节点、注释节点、处理指令节点和文本节点。可以为元素节点定义一个唯一的标识id。
    元素节点都可以有扩展名,它是由两部分组成的:一部分是命名空间URI,另一部分是本地的命名。
  3. 文本节点(Text Nodes)
    文本节点包含了一组字符数据,即CDATA中包含的字符。任何一个文本节点都不会有紧邻的兄弟文本节点,而且文本节点没有扩展名。
  4. 属性节点(Attribute Nodes)
    每 一个元素节点有一个相关联的属性节点集合,元素是每个属性节点的父节点,但属性节点却不是其父元素的子节点。这就是说,通过查找元素的子节点可以匹配出元 素的属性节点,但反过来不成立,只是单向的。再有,元素的属性节点没有共享性,也就是说不同的元素节点不共有同一个属性节点。
    对缺省属性的处理等同于定义了的属性。如果一个属性是在DTD声明的,但声明为#IMPLIED,而该属性没有在元素中定义,则该元素的属性节点集中不包含该属性。
    此外,与属性相对应的属性节点都没有命名空间的声明。命名空间属性对应着另一种类型的节点。
  5. 命名空间节点(Namespace Nodes)每一个元素节点都有一个相关的命名空间节点集。在XML文档中,命名空间是通过保留属性声明的,因此,在XPath中,该类节点与属性节点极为相似,它们与父元素之间的关系是单向的,并且不具有共享性。
  6. 处理指令节点(Processing Instruction Nodes)
    处理指令节点对应于XML文档中的每一条处理指令。它也有扩展名,扩展名的本地命名指向处理对象,而命名空间部分为空。
  7. 注释节点(Comment Nodes)
    注释节点对应于文档中的注释。

下面,我们来构造一棵XML文档树,作为后面举例的依托:

现在,我们就来介绍一些XPath中节点匹配的基本方法。

  1. 路径匹配 路径匹配与文件路径的表示相仿,比较好理解。有以下几个符号:
    符  号 含  义 举  例 匹配结果
    / 指示节点路径 /A/C/D 节点”A”的子节点”C”的子节点”D”,即id值为d2的D节点
    / 根节点
    // 所有路径以”//”后指定的子路径结尾的元素 //E 所有E元素,结果是所有三个E元素
    //C/E 所有父节点为C的E元素,结果是id值为e1和e2的两个E元素
    * 路径的通配符 /A/B/C/* A元素→B元素→C元素下的所有子元素,即name值为b的B元素、id值为d1的D元素和id值为e1和e2的两个E元素
    /*/*/D 上面有两级节点的D元素,匹配结果是id值为d2的D元素
    //* 所有的元素
    | 逻辑或 //B | //C 所有B元素和C元素

     

  2. 位置匹配 对于每一个元素,它的各个子元素是有序的。如:
    举  例 含  义 匹配结果
    /A/B/C[1] A元素→B元素→C元素的第一个子元素 name值为b的B元素
    /A/B/C[last()] A元素→B元素→C元素的最后一个子元素 id值为e2的E元素
    /A/B/C[position()>1] A元素→B元素→C元素之下的位置号大于1的元素 id值为d1的D元素和两个具有id值的E元素

     

  3. 属性及属性 在XPath中可以利用属性及属性值来匹配元素,要注意的是,元素的属性名前要有”@”前缀。例如:
    举  例 含  义 匹配结果
    //B[@id] 所有具有属性id的B元素 id值为b1和b2的两个B元素
    //B[@*] 所有具有属性的B元素 两个具有id属性的B元素和一个具有name属性B元素
    //B[not(@*)] 所有不具有属性的B元素 A元素→C元素下的B元素
    //B[@id=”b1″] id值为b1的B元素 A元素下的B元素

     

  4. 亲属关系匹配 XML文档可归结为树型结构,因此任何一个节点都不是孤立的。通常我们把节点之间的归属关系归结为一种亲属关系,如父亲、孩子、祖先、后代、兄弟等等。在对元素进行匹配时,同样可以用到这些概念。例如:
    举  例 含  义 匹配结果
    //E/parent::* 所有E节点的父节点元素 id值为a1的A元素和id值为c1的C元素
    //F/ancestor::* 所有F元素的祖先节点元素 id值为a1的A元素和id值为c2的C元素
    /A/child::* A的子元素 id值为b1、b2的B元素,id值为c2的C元素,以及没有任何属性的E元素
    /A/descendant::* A的所有后代元素 除A元素以外的所有其它元素
    //F/self::* 所有F的自身元素 F元素本身
    //F/ancestor-or-self::* 所有F元素及它的祖先节点元素 F元素、F元素的父节点C元素和A元素
    /A/C/descendant-or-self::* 所有A元素→C元素及它们的后代元素 id值为c2的C元素、该元素的子元素B、D、F元素
    /A/C/following-sibling::* A元素→C元素的紧邻的后序所有兄弟节点元素 没有任何属性的E元素
    /A/C/preceding-sibling::* A元素→C元素的紧邻的前面所有兄弟节点元素 id值为b1和b2的两个B元素
    /A/B/C/following::* A元素→B元素→C元素的后序的所有元素 id为b2的B元素、无属性的C元素、无属性的B元素、id为d2的D元素、无属性的F元素、无属性的E元素。
    /A/C/preceding::* A元素→C元素的前面的所有元素 id为b2的B元素、id为e2的E元素、id为e1的E元素、id为d1的D元素、name为b的B元素、id为c1的C元素、id为b1的B元素

     

  5. 条件匹配

条件匹配就是利用一些函数的运算结果的布尔值来匹配符合条件的节点。常用于条件匹配的函数有四大类:节点函数、字符串函数、数值函    数、布尔函数。例如前面提到的last()、position()等等。这些功能函数可以帮助我们精确寻找需要的节点。 函数及功能 作用 count()功能 统计计数,返回符合条件的节点的个数 number()功能 将属性的值中的文本转换为数值 substring() 功能 语法:substring(value, start, length) 截取字符串 sum()功能 求和 这些功能只是XPath语法中的一部分,还有大量的功能函数没有介绍,而且目前XPath的语法仍然在不断发展中。通过这些函数我们可以实现更加复杂的查询和操作。 以上这些匹配方法中,用得最多的还要数路径匹配。依靠给出相对于当前路径的子路径来定位节点的。

用SelectSingleNode()和SelectNodes()搜索结点

在xml搜索节点(两种方法)