Dom游历

已知某个位置，我们要其附近位置的dom树中游历，是一件经常性的任务。Ext Core里面就有这样跨浏览器的方法，允许我们在dom之中穿梭自如。再一次，CSS进入了我们的视野，使得干起复杂的任务时没那么痛苦。基于CSS3的选择符（选择器）在方面也尤其地干练！

拿以下的装饰做示范：

<style type="text/css">

    .red {
        color: #F00;
    }
</style>	
...
<div id='elId'>
    <ul>
        <li>a-one</li>

        <li>a-two</li>
        <li>a-three</li>
        <li>a-four</li>

    </ul>
    <ul>
        <li>b-one</li>
        <li>b-two</li>

        <li>b-three</li>                
    </ul>
</div>

这是一堆列表元素，要让其中的偶数行变红色。要如此优雅地实现该功能，Ext不是没有，键入命令如下：

Ext.fly('elId').select('li:nth-child(2n)').addClass('red');

结果如下：

我们已见识过游历DOM方面，依靠Ext Core所带来的强大威力，——类似还有更多的，看看：

• is
  测试当前元素是否与传入的选择符相符一致。

  var el = Ext.get('elId');
  if (el.is('p.myCls')) {
  	// 条件成立
  
  }

• findParent
  定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。

  Ext.fly('elId').findParent('div'); // 返回dom节点
  
  Ext.fly('elId').findParent('div', 4); // 查找4个节点
  Ext.fly('elId').findParent('div', null, true); // 返回Ext.Element

• findParentNode
  定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。

  Ext.fly('elId').findParentNode('div');

• up
  沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。

  Ext.fly('elId').up('div');
  Ext.fly('elId').up('div', 5); // 限5层的内查找

• select
  传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document可是搜索。

  // 返回结果的CompositeElement
  Ext.fly('elId').select('div:nth-child(2)');
  // 返回数组
  Ext.fly('elId').select('div:nth-child(2)', true);
  
  // 整个document都会搜索
  Ext.select('div:nth-child(2)');

• query
  进行一次query的查询，返回DOM 节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为 document。

  // 返回dom节点组成的数组
  Ext.query('div:nth-child(2)'); 

• child
  基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。

  Ext.fly('elId').child('p.highlight');  // 返回的类型是Ext.Element
  
  Ext.fly('elId').child('p.highlight', true);  // 返回dom节点

• down
  基于该选择符，"直接"选取单个子节点。

  Ext.fly('elId').down('span');  // 返回的类型是Ext.Element
  Ext.fly('elId').down('span', true);  // 返回dom节点

• parent
  返回当前节点的那个父节点，可选地可送入一个期待的选择符。

  // 返回父节点，类型是Ext.Element
  Ext.fly('elId').parent();  
  // 返回父节点，类型是html dom
  Ext.fly('elId').parent("", true);
  
  // 返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element
  Ext.fly('elId').parent("div");

• next
  获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。

  // 返回下一个侧边节点，类型是Ext.Element
  Ext.fly('elId').next();
  // 返回下一个侧边节点，类型是html dom
  Ext.fly('elId').next("", true);
  // 返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
  Ext.fly('elId').next("div");

• prev
  获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。

  // 返回上一个侧边节点，类型是Ext.Element
  Ext.fly('elId').prev();
  // 返回上一个侧边节点，类型是html dom
  Ext.fly('elId').prev("", true);
  // 返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
  Ext.fly('elId').prev("div");

• first
  获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。

  // 返回第一个侧边节点，类型是Ext.Element
  Ext.fly('elId').first();
  // 返回第一个侧边节点，类型是html dom
  Ext.fly('elId').first("", true);
  // 返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
  Ext.fly('elId').first("div");

• last
  获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。

  // 返回最后一个侧边节点，类型是Ext.Element
  Ext.fly('elId').last();
  // 返回最后一个侧边节点，类型是html dom
  Ext.fly('elId').last("", true);
  // 返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
  Ext.fly('elId').last("div");

<div id='elId'>
	<p>paragraph one</p>
	<p>paragraph two</p>

	<p>paragraph three</p>
</div>

这时我们为其加入一个子节点“elId”：

Ext.fly('elId').insertFirst({
	tag: 'p',
	html: 'Hi! I am the new first child.'

});

• appendChild
  把送入的元素归为这个元素的子元素。

  var el = Ext.get('elId1');
  // 用id指定
  Ext.fly('elId').appendChild('elId2');
  // Ext.Element添加
  Ext.fly('elId').appendChild(el);
  // 选择符组合地添加
  Ext.fly('elId').appendChild(['elId2','elId3']);
  // 直接添加dom节点
  Ext.fly('elId').appendChild(el.dom);
  
  // 添加CompositeElement，一组的div
  Ext.fly('elId').appendChild(Ext.select('div'));  

• appendTo
  把这个元素添加到送入的元素里面。

  var el = Ext.get('elId1');	
  // 'elId'添加到'elId2'里面
  Ext.fly('elId').appendTo('elId2'); 
  Ext.fly('elId').appendTo(el);  // 添加到Ext.Element el

• insertBefore
  传入一个元素的参数，将其放置在当前元素之前的位置。

  var el = Ext.get('elId1');	
  
  // dom节点在前面插入
  Ext.fly('elId').insertBefore('elId2');
  //Ext.Element el在前面插入
  Ext.fly('elId').insertBefore(el);

• insertAfter
  传入一个元素的参数，将其放置在当前元素之后的位置。

  var el = Ext.get('elId1');	
  
  // dom节点在后面插入
  Ext.fly('elId').insertAfter('elId2');
  // Ext.Element el在后面插入
  
  Ext.fly('elId').insertAfter(el);

• insertFirst
  可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。

  var el = Ext.get('elId1');	
  
  
  // 插入的dom节点作为第一个元素
  Ext.fly('elId').insertFirst('elId2');  
  // 插入的Ext.Element作为第一个元素
  Ext.fly('elId').insertFirst(el);
  		
  // 用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。
  Ext.fly('elId').insertFirst({
  	tag: 'p',
  	cls: 'myCls',
  	html: 'Hi I am the new first child'
  
  });

• replace
  用于当前这个元素替换传入的元素。

  var el = Ext.get('elId1');	
  
   // 'elId'去替换'elId2'
  
  Ext.fly('elId').replace('elId2'); 
  //  'elId'去替换'elId1'
  Ext.fly('elId').replace(el);

• replaceWith
  用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。

  var el = Ext.get('elId1');	
  
  Ext.fly('elId').replaceWith('elId2');  // 'elId2'替换掉'elId'.
  Ext.fly('elId').replaceWith(el);  // 'elId1'替换掉'elId'
  
  		
  // 用DomHelper配置项创建新节点，并用该节点换掉‘elId’。
  Ext.fly('elId').replaceWith({
  	tag: 'p',
  	cls: 'myCls',		
  	html: 'Hi I have replaced elId'
  });

事件控制Event Handling

事件控制为解决跨浏览器的工作带来便利。

正如Ext.Element封装了原生的Dom类型节点，Ext.EventObject也是封装了浏览器的原生事件对象。Ext.EventObject的实例解决了各浏览器之间的差异。例如鼠标按钮被点击了、有按键被按下了、或者要停止事件的推进等的任务都有相应的方法参与。

要将事件处理器和页面中的元素绑定在一起可以使用Ext.Element的on方法。它是addListener方法的简写形式。第一个参数是要订阅的事件类型和第二个参数是准备触发的事件函数。

Ext.fly('myEl').on('click', function(e, t) {
	// myEl有点击的动作
	// e是这次产生的事件对象，Ext.EventObject
	// t是HTMLElement目标
});

Ext Core常规化了所有DOM事件的参数。事件处理器总会被送入一个常规化的事件对象（Ext.EventObject）和目标元素，HTMLElement。

这些是用于事件处理方面的API：

• addListener/on
  为此元素加入一个事件处理函数。on()是其简写方式。简写方式作用等价，写代码时更省力。

  var el = Ext.get('elId');
  el.on('click', function(e,t) {
  	// e是一个标准化的事件对象(Ext.EventObject)
  
  	// t就是点击的目标元素，这是个Ext.Element.
  	// 对象指针this也指向t			
  });

• removeListener/un
  从这个元素上移除一个事件处理函数。un()是它的简写方式。

  var el = Ext.get('elId');
  el.un('click', this.handlerFn);
  // 或
  el.removeListener('click', this.handlerFn);

• Ext.EventObject
  EventObject呈现了统一各浏览器的这么一个事件模型，并尽量符合W3C的标准方法。

  // e它不是一个标准的事件对象，而是Ext.EventObject。
  function handleClick(e){ 
      e.preventDefault();
      var target = e.getTarget();
      ...
  }
  
  var myDiv = Ext.get('myDiv');
  myDiv.on("click", handleClick);
  // 或
  Ext.EventManager.on('myDiv', 'click', handleClick);
  Ext.EventManager.addListener('myDiv', 'click', handleClick);

高级事件功能

事件委托、事件缓冲、事件延迟等的这些功能都是属于高级事件的控制内容，Ext Core在此方面提供了一系列的配置选项。

• 委托delegation
  减低内存销毁和防止内存泄露的隐患是事件委托技术的两项好处，其基本要义是：

  并不是集合内的每一个元素都要登记上事件处理器，而是在集合其容器上登记一次便可，这样产生了中央化的一个事件处理器，然后就有不断循环该事件周期，使得逐层上报机制付诸实现，只要在容器层面定义就可以。

  这不是说要求我们在body元素挂上一个全局的事件，这会导致页面内的任何动作都会触发那个事件，无疑很有可能会带来反效果的，我们想提升效能却会更慢……因此，我们说，适用的场景应该像是下拉列表、日历等等这样拥有一群元素的控件，直接或间接地体现在一个容器身上的那么一个控件。下面一个大的ul元素为例子：
  
  以装饰作示例：

  <ul id='actions'>
      <li id='btn-edit'></li>
  
      <li id='btn-delete'></li>
      <li id='btn-cancel'></li>
  </ul>

  不是登记一个处理器而是为 逐个列表项（list item）都登记：

  Ext.fly('btn-edit').on('click, function(e,t) {
  	// 执行事件具体过程
  });
  Ext.fly('btn-delete').on('click, function(e,t) {
  	// 执行事件具体过程
  });
  Ext.fly('btn-cancel').on('click, function(e,t) {
  	// 执行事件具体过程
  });

  要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：

  Ext.fly('actions').on('click, function(e,t) {
  	switch(t.id) {
  		case ''btn-edit':
  		// 处理特定元素的事件具体过程
  		break;
  		case 'btn-delete':
  		// 处理特定元素的事件具体过程
  		break;
  		case 'btn-cancel':
  		// 处理特定元素的事件具体过程
  		break;
  	}
  });

  基于dom各层经过逐层上报的原因，可以说，我们登记了的“actions”的div一定会被访问得到。这时就是执行我们所指定的switch指令，跳到对应匹配的元素那部分代码。这样方法具备可伸缩性，因为我们只要维护一个函数就可以控制那么多的元素的事件。

  
  
• 委托化delegate
  你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元素，或是往下一层查找目标的子孙。

  el.on('click', function(e,t) {
      // 执行事件具体过程
  
  }, this, {
      // 对子孙'clickable'有效
      delegate: '.clickable' 
  });

• 翻转hover
  这是一个Ext的翻转菜单的实例：

  // handles when the mouse enters the element	
  function enter(e,t){
      t.toggleClass('red');
  }
  // handles when the mouse leaves the element
  function leave(e,t){
      t.toggleClass('red');
  }
  // subscribe to the hover
  
  el.hover(over, out);

• 移除事件句柄removeAllListeners
  在该元素身上移除所有已加入的侦听器。

  el.removeAllListeners();

• 是否一次性触发single
  你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。

  el.on('click', function(e,t) {
      // 执行事件具体过程
  }, this, {
      single: true // 触发一次后不会再执行事件了
  
  });

• 缓冲buffer
  你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。

  el.on('click', function(e,t) {
      // 执行事件具体过程
  
  }, this, {
      buffer: 1000 // 重复响应事件以一秒为时间间隔
  });

• 延时delay
  你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。

  el.on('click', function(e,t) {
      // 执行事件具体过程
  
  }, this, {
      // 延迟事件，响应事件后开始计时（这里一秒）
      delay: 1000 
      
  });

• 目标target
  你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。

  el.on('click', function(e,t) {
      // 执行事件具体过程
  }, this, {
      // 遇到里头的第一个'div'才会触发事件
      target: el.up('div') 
  });

尺寸&大小

某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下，Ext Core也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示这是默认的动画。我们来看一看：

// 设置高度为200px以默认配置进行动画
Ext.fly('elId').setHeight(200, true);

// 设置高度为150px以自定义的配置进行动画
Ext.fly('elId').setHeight(150, {
    duration : .5, // 动画将会持续半秒
    // 动画过后改变其内容为“结束”

    callback: function(){ this.update("结束"); } 
});

拉出Firebug，检测一下元素（右击后选择元素“Inspect Element”），观察右方的面板并点击“layout”，您应会看到这样：

这块地方提供的信息足够清楚显示有关该元素的所有尺寸。从中得知，当前元素宽895px、高1669px、0px的内边距、0px的边框和0px的外边距。不过这些信息亦可从Ext Core的Ext.Element的API查询得知！

var dimSz = Ext.get('dim-sizing');
var padding = dimSz.getPadding('lrtb'); // 返回0px的值
var border = dimSz.getBorderWidth('lrtb'); // 返回0px的值

var height = dimSz.getHeight(); // 返回1691px的值
var width = dimSz.getWidth(); // 返回895px的值

把代码弄进Firebug调试看看，有否这样的结果？实际上用这些set的方法改变高度或宽度后就可立即在firebug的layout面板看到的。(注意：if如果对图片设置其不同大小的高度或宽度，那就是浏览器的尺寸。如果你在浏览器中浏览图片元素的实际情况那就是实际的输出大小。）

剩下的API是哪些？我们看看:

• getHeight
  返回元素的偏移（offset）高度。

  var ht = Ext.fly('elId').getHeight();

• getWidth
  返回元素的偏移（offset）宽度。

  var wd = Ext.fly('elId').getWidth();

• setHeight
  设置元素的高度。

  Ext.fly('elId').setHeight();

• setWidth
  设置元素的宽度。

  Ext.fly('elId').setWidth();

• getBorderWidth
  返回指定边（side(s)）的padding宽度。

  var bdr_wd = Ext.fly('elId').getBorderWidth('lr');

• getPadding
  可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到(l)eft padding +(r)ight padding。

  var padding = Ext.fly('elId').getPadding('lr');

• clip
  保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip()来移除。

  Ext.fly('elId').clip();

• unclip
  在调用clip()之前，返回原始的裁剪部分（溢出的）。

  Ext.fly('elId').unclip();

• isBorderBox
  测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。

  if (Ext.isBorderBox) {
      // 
  }

定位

通过Ext Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal configuration object），或即就是以个布尔型的true，表示这是默认的动画。我们来看一看例子是怎样子的：

// 改变x-coord为75px，附有自定义的动画配置
Ext.fly('elId').setX(75, {
    duration : .5, // 动画将会持续半秒
    // 动画过后改变其内容为“结束”

    callback: function(){ this.update("结束"); }
});

• getX
  返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  var elX = Ext.fly('elId').getX()

• getY
  返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  var elY = Ext.fly('elId').getY()

• getXY
  返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  var elXY = Ext.fly('elId').getXY() // elXY是数组

• setX
  返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  Ext.fly('elId').setX(10)

• setY
  返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  Ext.fly('elId').setY(10)

• setXY
  返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  Ext.fly('elId').setXY([20,10])

• getOffsetsTo
  返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。

  var elOffsets = Ext.fly('elId').getOffsetsTo(anotherEl);

• getLeft
  获取左边的X坐标。

  var elLeft = Ext.fly('elId').getLeft();

• getRight
  获取元素右边的X坐标（元素X位置 + 元素宽度）。

  var elRight = Ext.fly('elId').getRight();

• getTop
  获取顶部Y坐标。

  var elTop = Ext.fly('elId').getTop();

• getBottom
  获取元素的底部Y坐标（元素Y位置 + 元素宽度）。

  var elBottom = Ext.fly('elId').getBottom();

• setLeft
  直接使用CSS样式（代替setX()），设定元素的left位置。

  Ext.fly('elId').setLeft(25)

• setRight
  设置元素CSS Right的样式。

  Ext.fly('elId').setRight(15)

• setTop
  直接使用CSS样式（代替setY()），设定元素的top位置。

  Ext.fly('elId').setTop(12)

• setBottom
  设置元素CSS Bottom的样式。

  Ext.fly('elId').setBottom(15)

• setLocation
  无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。

  Ext.fly('elId').setLocation(15,32)

• moveTo
  无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。

  Ext.fly('elId').moveTo(12,17)

• position
  初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。

  Ext.fly('elId').position("relative")

• clearPositioning
  当文档加载后清除位置并复位到默认。

  Ext.fly('elId').clearPositioning()	
  Ext.fly('elId').clearPositioning("top")

• getPositioning
  返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。

  var pos = Ext.fly('elId').getPositioning()

• setPositioning
  由getPositioning()返回的对象去进行定位。

  Ext.fly('elId').setPositioning({
      left: 'static',
      right: 'auto'
  })

• translatePoints
  送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。

  // {left:translX, top: translY}
  var points = Ext.fly('elId').translatePoints(15,18); 

动画

Ext Core已经齐备了若干的动画的插件，附加在Ext.Element的身上，让你进一步地发挥这一组组预配置的动画，作出更“酷”的东东来。

放在Firebug里面运行这段代码看看，你将发现Ext就内建了一组完整的动画。每一组动画就是使用这些配置字面对象（configuration object literal），去制定这些动画如何产生。不一定要默认的配置，或者你也可以在动画执行完毕后接着执行一个回调函数：

Ext.fly('slideEl').slideOut('r');

Ext.fly('slideEl').slideOut('r', {
	callback : function(){
		alert('元素已滑出');
	}
});

可以看出这样子做动画着实强大！

动画支持八方位的定向，所以你可以选择八个不同的定位点来启动您的动画效果。

进一步浏览里面的API：

• slideIn/slideOut
  将元素滑入到视图中。作为可选参数传入的定位锚点将被设置为滑入特效的起始点。该函数会在需要的时候自动将元素与一个固定尺寸的容器封装起来。有效的定位锚点可以参见 Fx 类的概述。用法：

  // 默认情况：将元素从顶部滑入
  
  el.slideIn();
  // 自定义：在2秒钟内将元素从右边滑入
  el.slideOut();
  
  // 常见的配置选项及默认值
  el.slideIn('t', {
      easing: 'easeOut',
      duration: .5
  });
  el.slideOut('t', {
      easing: 'easeOut',
      duration: .5,
      remove: false,
      useDisplay: false
  
  });

• puff
  渐隐元素的同时还伴随着向各个方向缓慢地展开。特效结束后，元素会被隐藏（visibility = 'hidden'），但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。用法：

  // 默认
  el.puff();
  
  // 常见的配置选项及默认值
  el.puff({
      easing: 'easeOut',
      duration: .5,
      remove: false,
      useDisplay: false
  
  });

• switchOff
  类似单击过后般地闪烁一下元素，然后从元素的中间开始收缩（类似于关闭电视机时的效果）。特效结束后，元素会被隐藏（visibility = 'hidden'），但是块元素仍然会在 document 对象中占据空间。如果需要将元素从 DOM 树删除，则使用'remove'配置选项。用法：

  // 默认
  el.switchOff();
  
  // 所有的配置选项及默认值
  el.switchOff({
      easing: 'easeIn',
      duration: .3,
      remove: false,
      useDisplay: false
  
  });

• highlight
  根据设置的颜色高亮显示 Element 对象（默认情况下应用于 background-color 属性，但是也可以通过"attr"配置选项来改变），然后渐隐为原始颜色。如果原始颜色不可用，你应该设置"endColor"配置选项以免动画结束后被清除。用法：

  // 默认情况：高亮显示的背景颜色为黄色
  el.highlight();
  
  // 自定义：高亮显示前景字符颜色为蓝色并持续2秒
  el.highlight("ffff9c", {
      // 可以任何有效的CSS属性表示颜色
  
      attr: "background-color", 
      endColor: (current color) or "ffffff",
      easing: 'easeIn',
      duration: 1
  });

• frame
  展示一个展开的波纹，伴随着渐隐的边框以突出显示 Element 对象。用法：

  // 默认情况：一个淡蓝色的波纹
  el.frame();
  
  // 自定义：三个红色的波纹并持续3秒
  el.frame("C3DAF9", 1, {
      duration: 1 //每个波纹持续的时间
      // 注意：这里不能使用 Easing 选项在，即使被包含了也会被忽略
  });

• pause
  在任何后续的等效开始之前创建一次暂停。如果队列中没有后续特效则没有效果。用法：

  el.pause(1);

• fadeIn/fadeOut
  将元素从透明渐变为不透明。结束时的透明度可以根据"endOpacity"选项来指定。用法：

  // 默认情况：将可见度由 0 渐变到 100%
  
  el.fadeIn();
  el.fadeOut();
  
  // 自定义：在2秒钟之内将可见度由 0 渐变到 75%
  el.fadeIn({
      endOpacity: 1, // 可以是 0 到 1 之前的任意值（例如：.5）	
      easing: 'easeOut',
      duration: .5
  });
  el.fadeOut({
      endOpacity: 0, // 可以是 0 到 1 之前的任意值（例如：.5）
      easing: 'easeOut',
      duration: .5,
      remove: false,
      useDisplay: false
  
  });

• scale
  以动画展示元素从开始的高度/宽度转换到结束的高度/宽度。用法：

  // 将宽度和高度设置为 100x100 象素
  el.scale(100, 100);
  
  // 常见的配置选项及默认值。
  
  // 如果给定值为 null，则高度和宽度默认被设置为元素已有的值。
  el.scale(
      [element's width],
      [element's height], {
  	    easing: 'easeOut',
  	    duration: .35
  	}
  );

• shift
  以动画展示元素任意组合属性的改变，如元素的尺寸、位置坐标和（或）透明度。如果以上属性中的任意一个没有在配置选项对象中指定则该属性不会发生改变。为了使该特效生效，则必须在配置选项对象中设置至少一个新的尺寸、位置坐标或透明度属性。用法：

  // 将元素水平地滑动到X坐标值为200的位置，同时还伴随着高度和透明度的改变
  el.shift({ x: 200, height: 50, opacity: .8 });
  
  // 常见的配置选项及默认值。
  el.shift({
      width: [element's width],
      height: [element's height],
      x: [element's x position],
      y: [element's y position],
      opacity: [element's opacity],
      easing: 'easeOut',
      duration: .35
  });

• ghost
  将元素从视图滑出并伴随着渐隐。作为可选参数传入的定位锚点将被设置为滑出特效的结束点。用法：

  // 默认情况：将元素向下方滑出并渐隐
  el.ghost();
  
  // 自定义：在2秒钟内将元素向右边滑出并渐隐
  el.ghost('b', {
      easing: 'easeOut',
      duration: .5,
      remove: false,
      useDisplay: false
  
  });

• 复杂的动画
  我们也可以用ExtCore的动画系统来建立我们制定的动画，在Firebug里面测试一下下面的代码：

  var el = Ext.get('complexEl')
  el.animate({
  	borderWidth: {to: 3, from: 0},
  	opacity: {to: .3, from: 1},
  	height: {to: 50, from: el.getHeight()},
  	width: {to: 300, from: el.getWidth()}	
  });

杂项

以上未能分类的就这里列出，都是Ext.Element方法。

• focus
  使这个元素得到焦点。忽略任何已捕获的异常。

  el.focus();

• blur
  使这个元素失去焦点。忽略任何已捕获的异常。

  el.blur();

• getValue
  回“值的”属性值。

  el.getValue();
  el.getValue(true); // 输出值为数字型
  

• isBorderBox
  测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。

  if (Ext.isBorderBox) { }

• getAttributeNS

  在DOM节点中的某个元素，返回其一个命名空间属性的值。

  el.getAttributeNS("","name");

CompositeElement元素

什么是CompositeElement？

CompositeElement能够把一组元素视作一个元素来处理（依据维基百科全书），这组元素的数量可以零个到多个。CompositeElement采用与Ext.Element相同的接口，以简化程序员的工作，也可以减少处理集合上的那些一般内核检查（指要写“循环”的代码）。通常CompositeElement由执行静态方法Ext.select来获取得到。Ext.select()基于DomQuery来搜索整个文档，匹配符合特定选择符（Selecetor）的元素。

例如下列的装饰元素：

<html>
   <body>
      <div id="first" class="title">Sample A</div>
      <div id="second" class="doesNotMatch">Lorem Ipsum</div>

      <div id="third" class="title secondCSSCls">Some additional content</div>
   </body>
</html>

我们根据选择符“.title”查询整张页面得到一个CompositeElement类型的对象，其包含了两个div的引用，分别是第一个div和第二个div。

var els = Ext.select('.title');

注意：第三个元素同时还附有secondCSSCls的样式。HtmlElement元素可允许有多个CSS样式类，就用空格分割开。这里的选择符不是说只要title样式的，那么“first”与“thrid”都能返回得到。

获取CompositeElement对象后即可像单个元素那段操作一群Elements。例如，我们对集合中的每个元素加入CSS的.error样式。

var els = Ext.select('.title');
els.addClass('error');

如果要获取的某一些元素是处于另处一元素的附近的，这两者之间相对的关系是已知的，那么就可以从那个元素为起点进行搜索查询。这样查询效率会更来得快，原因是你是在文档中的某一部分内局部地查询，自然比全体查询的快。下面HTML中，“accordion”的div标签是包含着first、second 和third元素：

<html>
   <body>
      <div id="accordion">
         <div id="first" class="title">Sample A</div>

         <div id="second" class="doesNotMatch">Lorem Ipsum</div>
         <div id="third" class="title secondCSSCls">
            Some additional content
         </div>
      </div>
   </body>
</html>

由于我们得知这三元素都在accordion元素里面的，因此我们将搜索范围仅限定在accordion元素内。如果清楚元素的相对位置，应该尽量使用这种缩小范围的方式来查询，以利于性能提升。

其它有用的CompositeElement方法如下面代码所列：

var accordion = Ext.get('accordion');
accordion.select('title');
// firstItem是第一个的div，类型是Ext.Element
var firstItem =  accordion.item(0);
 // 提示1或居二的位置
alert(accordion.indexOf('third'));
// 提示2
alert(accordion.getCount()); 
// 集合里和DOM里面都没有这个元素了
accordion.removeElement('one', true); 

注意：Ext JS用户所熟悉的一些方法，如each、first、last、fill、contains、filter这些都在CompositeElement里都没有。

Ajax

Ajax的定义

“异步JavaScript与XML（Ajax）”与是几种开发技术汇总的名称，用于开发Web交互程序或富介面的互联网程序。利用Ajax，可不在影响现有页面之交互的情况下，达到与服务端异步式的数据获取，当前页面无须一定的变化。负责数据交互的是XHR对象，基于各浏览器其实现XHR方式的不同，Ajax框架都提供一个抽象接口，处理了这些差并异集中在一个可复用的编程基建中，而在Ext中，负责这些任务的正是Ext.Ajax对象。

Ext.Ajax

Ext.Ajax对象继承自Ext.data.Connection，定义为单例提供了一个既统一又高度灵活的Ajax通迅服务。利用这个单例对象，就可以处理全体Ajax请求，并执行相关的方法、事件和参数。

Ext.Ajax的事件

每次请求都触发事件，这是全局规定的。

• beforerequest (conn, opts)
  任何Ajax请求发送之前触发。
• requestcomplete (conn, response, opts)
  任何Ajax成功请求后触发。
• requestexception (conn, response, opts)
  服务端返回一个错误的HTTP状态码时触发。

// 例子:凡是Ajax通迅都会通过spinner告知状态如何。
Ext.Ajax.on('beforerequest', this.showSpinner, this);
Ext.Ajax.on('requestcomplete', this.hideSpinner, this);
Ext.Ajax.on('requestexception', this.hideSpinner, this);

Ext.Ajax的属性

由于Ext.Ajax是单例，所以你可以在发起请求的时候才覆盖Ext.Ajax属性。这些是最常见的属性：

• method：用于请求的默认方法，注意这里大小写有关系的，应为是全部大写（默认为undefined，如不设置参数就是"POST"，否则是"GET"）。
• extraParams：收集各属性的对象，每次发起请求就会把该对象身上的各属性作为参数发送出去（默认为undefined）需要与Session信息和其它数据交互就要在这里设置。
• url： 请求目标的服务器地址（默认为undefined），如果服务端都用一个url来接收请求，那么在这里设置过一次就足够了。
• defaultHeaders：对请求头部设置的对象（默认为undefined）。

// 每次请求都将这字段与信息注入到头部中去。
Ext.Ajax.defaultHeaders = {
    'Powered-By': 'Ext Core'
};

Ext.Ajax.request

Ext.Ajax.request就是发送与接收服务端函数的函数。服务端返用response以决定执行success或failure函数。注意这种success/failure函数是异步的，即就是服务端有响应后客户端这边回头调用（回调函数），期用客户端的Web页面还可以进行其它任务的操作。

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('服务端失效的状态代码：' + response.status);
   }
});

Ext.Updater

Ajax另外一个常见用法是动态更新页面中的原素不需要刷新页面。response方法暴露了el配置项，在请求之后根据内容设置到元素的innerHTML。

表单的Ajax式提交

用Ext.Ajax.request 的配置项提交表单:

Ext.Ajax.request({
   url: 'ajax_demo/sample.json',
   form: 'myForm',
   success: function(response, opts) {
      var obj = Ext.decode(response.responseText);
      console.dir(obj);
   },
   failure: function(response, opts) {
      console.log('服务端失效的状态代码：' + response.status);
   }
});

DomQuery

什么是DomQuery？

DomQuery的作用在于提供选择符（Selector）、XPath的快速元素定位，对HTML与XML的文档都有效。DomQuery支持到CSS3规范的选择符，还有一些自定义的选择符与较简单的，一份完整的CSS3规范在这里。

多选择符

你可以输入多个查询条件，然后在一个对象上面返回。

// 匹配所有的带foo class的div和带bar class的span
Ext.select('div.foo, span.bar');

根节点

使用选择符，它可以支持一个根节点的概念。根节点的意思是如果有指定选择符的根节点表示从该节点上开始进行搜索。这样可以助于提升性能，因为若不存在根节点表示从document body开始进行搜索，速度自然比较慢。

Ext.get('myEl').select('div.foo');// 这是等价的
Ext.select('div.foo', true, 'myEl');// 这是等价的

查询链

对于构成复杂的查询情况，可以由多个查询条件组成查询链。依次按顺序进行属性链的查询。

// 匹配class为foo的div，要求是有title属性为bar的div，而且还是这个div下面最前头的子元素
Ext.select('div.foo[title=bar]:first');

元素选择符

• * 任意元素
• E 一个标签为 E 的元素
• E F 所有 E 元素的分支元素中含有标签为 F 的元素
• E > F 或 E/F 所有 E 元素的直系子元素中含有标签为 F 的元素
• E + F 所有标签为 F 并紧随着标签为 E 的元素之后的元素
• E ~ F 所有标签为 F 并与标签为 E 的元素是侧边的元素

// Matches all div elements
Ext.select('div'); 
// Matches all span elements contained inside a div at any level
Ext.select('div span');
// Matches all li elements with a ul as their immediate parent

Ext.select('ul > li'); 

属性选择符

• E[foo] 拥有一个名为 “foo” 的属性
• E[foo=bar] 拥有一个名为 “foo” 且值为 “bar” 的属性
• E[foo^=bar] 拥有一个名为 “foo” 且值以 “bar” 开头的属性
• E[foo$=bar] 拥有一个名为 “foo” 且值以 “bar” 结尾的属性
• E[foo*=bar] 拥有一个名为 “foo” 且值包含字串 “bar” 的属性
• E[foo%=2] 拥有一个名为 “foo” 且值能够被2整除的属性
• E[foo!=bar] 拥有一个名为 “foo” 且值不为 “bar” 的属性

// Matches all div elements with the class news
Ext.select('div.news'); 
// Matches all a elements with an href that is http://extjs.com
Ext.select('a[href=http://extjs.com]'); 
// Matches all img elements that have an alt tag
Ext.select('img[alt]'); 

伪类选择符

• E:first-child E 元素为其父元素的第一个子元素
• E:last-child E 元素为其父元素的最后一个子元素
• E:nth-child(n) E 元素为其父元素的第 n 个子元素（由1开始的个数）
• E:nth-child(odd) E 元素为其父元素的奇数个数的子元素
• E:nth-child(even) E 元素为其父元素的偶数个数的子元素
• E:only-child E 元素为其父元素的唯一子元素
• E:checked E 元素为拥有一个名为“checked”且值为“true”的元素（例如：单选框或复选框）
• E:first 结果集中第一个 E 元素
• E:last 结果集中最后一个 E 元素
• E:nth(n) 结果集中第 n 个 E 元素（由1开始的个数）
• E:odd :nth-child(odd) 的简写
• E:even :nth-child(even) 的简写
• E:contains(foo) E 元素的 innerHTML 属性中包含“foo”字串
• E:nodeValue(foo) E 元素包含一个 textNode 节点且 nodeValue 等于“foo”
• E:not(S) 一个与简单选择符 S 不匹配的 E 元素
• E:has(S) 一个包含与简单选择符 S 相匹配的分支元素的 E 元素
• E:next(S) 下一个侧边元素为与简单选择符 S 相匹配的 E 元素
• E:prev(S) 上一个侧边元素为与简单选择符 S 相匹配的 E 元素

// Matches the first div with a class of code
Ext.select('div.code:first'); 
// Matches spans that fall on an even index.
Ext.select('span:even'); 
// Matches all divs whos next sibling is a span with class header.
Ext.select('div:next(span.header)); 

输出装饰

DomHelper

DomHelper（下简称DH）是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与innerHTML的操作，DH经充分考虑并在性能上有足够的优化。

Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法。

markup

和过时的createHtml一样

insertHtml

insertBefore

insertAfter

insertFirst

append

overwrite

var myEl = document.createElement('a');
myEl.href = 'http://www.yahoo.com/';
myEl.innerHTML = 'My Link';
myEl.setAttribute('target', '_blank');

var myDiv = document.createElement('div');
myDiv.id = 'my-div';

myDiv.appendChild(myEl);
document.body.appendChild(myDiv);

Ext.DomHelper.append(document.body, {
    id: 'my-div',
    cn: [{
    	tag: 'a', 
    	href: 'http://www.yahoo.com/', 
    	html: 'My Link', 
    	target: '_blank'
    }]
});

DomHelper配置项

DomHelper是根据DomHelper 配置项未决定生成在页面上的HTML，这DomHelper配置可视作任何HTML元素的等价物。

<a href="http://www.extjs.com">Ext JS</a>

{
    tag: 'a',
    href: 'http://www.extjs.com',
    html: 'Ext JS'
}

模板

Tpl模板、格式化函数，from的静态方法（对textarea有用）。

模板成员方法

添加和执行成员格式化函数。

关于JS的加强语法

Javascript是一门灵活的语言。以它灵活性，其中一项表现为，JavaScript基础对象可以让程序员自由地绑定函数在其身上。为什么会这样做？基础对象是与这些所属的方法（函数）有密切联系的，开放给大家定义其关系的。不过这样的方法有许多，不大有可能一一实作出来，有些浏览器有，有些没有，但就开放出来这种修改的权利给程序员。当同时使用多个JavaScript库时，他们可能有各自的实现，但如果同名的方法、属性就犯大忌了，这种重叠将引入库与库之间的冲突……基于这种状况，Ext谨慎处理加入到基础对象的方法数量。这里是一份有关于各框架、库“入侵/污染”问题的调查报告：Framework Scanner。

if(Ext.isIE){
    // 执行该浏览器的专用代码
}

/* 当这是strict mode模式而且是safari的环境中，字体便有变化。*/
.ext-strict .ext-safari .sample-item{
    font-size: 20px; 
}

var s = Ext.id(null, 'prefix'); // 不指定元素
var s = Ext.id(Ext.get(document.body)); // 对元素分配id

var stop = false;
var task = {
    run: function(){
        if(!stop){
            alert(new Date());
        }else{
            runner.stop(task); // 有需要的话这里我们也能停止任务
        }
    },
    interval: 30000 // 每30秒一周期
};
var runner = new Ext.util.TaskRunner();
runner.start(task);

//使用TaskMgr
Ext.TaskMgr.start({
    run: function(){
    },
    interval: 1000
});

var task = new Ext.util.DelayedTask(function(){
     alert(Ext.getDom('myInputField').value.length);
 });
 // 调用函数之前等待500ms，如果用户在500ms内按下其他的键，这就会等于作废，重新开始500ms的计算。
 Ext.get('myInputField').on('keypress', function(){
     task.delay(500); 
 });

Person = Ext.extend(Object, {
    constructor: function(first, last){
        this.firstName = first;
        this.lastName = last;
    }

    getName: function(){
        return this.firstName + ' ' + this.lastName;
    }
});

Developer = Ext.extend(Person, {
    getName: function(){
        if(this.isCoding){
            return 'Go Away!';
        }else{
            // 访问父类的方法
            return Developer.superclass.getName.call(this); 
        }
    }
});

var p = new Person('John', 'Smith');
alert(p.getName());

// 我们已声明的Person类
Ext.override(Person, {
    getName: function(){
        // 覆盖了旧行为，这次last name排头
        return this.lastName + ' ' + this.firstName; 
    }
});

MyClass = Ext.extend(Object, {
    // 所有MyClass的实例都使用这{}，不会“按引用”复杂新一份出来。
    baseParams: {}, 
    
    foo: function(){
        this.baseParams.bar = 'baz';
    }
});

Ext.onReady(function(){

    var a = new MyClass();
    var b = new MyClass();
    
    a.foo();
    // a已影响b的baseParams 
    console.log(b.baseParams); 
});

MyApp = function(){
    var data; //外部无法访问data，这是的私有成员
    return {
        init: function(){
            // 初始化程序
        },
        
        getData: function(){
            return data;
        }
    };
}();
Ext.onReady(MyApp.init, MyApp);

var MyClass = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.addEvents('datachanged'); // 声明打算触发的事件
        MyClass.constructor.call(this, config);
    },
    
    update: function(){
        // 执行数据更新
        // 对订阅者送入我们指定的参数 
        // passed to the subscribers.
        this.fireEvent('datachanged', this, this.data.length); 
    }
});

// 进行事件的订阅
var c = new MyClass();
c.on('datachanged', function(obj, num){
    // 数据变化事件的反应
});

 // 两种方式都是一样的，后者的为佳。
Ext.namespace(
     'MyCompany', 
     'MyCompany.Application', 
     'MyCompany.Application.Reports'
);
Ext.namespace('MyCompany.Application.Reports');

本文转自温景良(Jason)博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2009/08/12/1544166.html，如需转载请自行联系原作者