Ext事件机制、AJax以及Ext常用类

1. Ext事件机制

 

 （1）事件的3中绑定方式

HTML/DHTML

DOM

EXTJS

 （2）Ext.util.Observable 事件的基类

 它为所有支持事件机制的extjs组建提供事件的支持。

 如果我们自己创建新的组建需要有时间的支持那么我们就继承它。

 事件的分类：

标准事件[键盘按钮按下,鼠标的单击双击,滑过滑动]。

业务事件[当面板收起的时候触发,当组建被销毁的时候触发,当每一个对象的属数值不为空的时候触发]。

 

 （3）addManagedListener 收管制的监听

 它是由调用的组建管理的,当组建执行了销毁命令的时候所有被组建管制的事件全部销毁。

 

 （4）relayEvents 事件的分发和传播(控制实现事件在不同空间或对象内的传播)

 比如说孩子喝完三鹿就去医院呀,老爸就要带着去医院

 

 （5）事件对象Ext.EventObject

 不是一个单例,不能被直接new出来,他会存活早事件处理的函数中

 

 （6）事件管理器Ext.EventManager

 它可以更方便的为页面元素绑定事件处理函数

 方法:addListener 为元素增减事件

 

2. Ext中的Ajax是 Ext.data.Connection的一个子类，提供了用简单的方式进行Ajax的功能实现

 

   （1）主要方法:

   abort : 终止一个没有完成Ajax请求

   isLoading : 判断指定的Ajax请求是不是正在运行

   paresStatus : 返回请求响应的代码

   request : 发送服务器请求

//json格式的数据
var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'yunfengcheng2008@126.com'}";
//xml格式的数据
var xmldata = "<user><name>mlmlml</name><age>19</age></user>";
//构建Ext的Ajax请求
Ext.Ajax.request({
 url : 'person.jsp',
 method : 'POST',
 timeout :3000,
 
 //请求的参数值
 params:{id:'01'},

 //可以提交form表单，只需要写表单的ID
 form:"myform",
 
 //下面是两种不同格式的请求参数
 jsonData:jsondata,
 xmlData：xmldata,
 
 //一些操作的函数，第一个为响应的值，第二个参数是请求的参数值
 success :function(response , options){
  alert(eval(response.responseText)[0].name);
 },
 failure  :function(response , options){
  alert(response.responseText+" "+options)
 }
});

（2）Ext.ElementLoader:方便我们重新构建页面

   load方法

   startAutoRefresh 方法

//get通过dom元素的id方式获得的是元素的对象
//getCmp通过定义对象ID的方式获得的是定义的对象，而不是简简单单的元素了 
//getDom通过dom元素的id方式获得的是dom元素
var time = Ext.get("time").getLoader();

//ajax常用的局部改变元素的值
time.load({
 url:'/extjs/extjs!getTime.action',
 renderer:function(loader,response,request){
  var time = response.responseText;
  Ext.getDom("time").value = time;
 }
});
//给元素设置定时的axja请求方式
i.startAutoRefresh(1000,{
 url:'/extjs/extjs!getI.action',
 renderer:function(loader,response,request){
  var i = response.responseText;
  Ext.getDom("i").value = i;
 }   
});

3. Ext以及core包下面的Domhelper、Element类。

 

  （1）Ext.core.Element

  API解释

  他是组建和控件的基础

  他对一个DOM对象的封装(Document Object Model)

  a、如何得到Element

   Ext.core.Element.fly(String/HTMLElement el, [String named] ) : Element

   Ext.get(Mixed el) : Element

  b、Element 相关方法

   addClsOnClick( String className ) : Ext.core.Element。

   addClsOnOver( String className ) : Ext.core.Element。

   addKeyMap( Object config ) : Ext.util.KeyMap。

   addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap。

   appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.Element

   createChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element。

  （2）Ext.core.DomHelper

  API解释

   他可以很容易的操作页面的HTML.和DOM元素

  append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element--------追加一个孩子。

 

  applyStyles---为元素添加样式 eg：Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");

 

  //下面两个是被当做兄弟追加的

  insertAfter( Mixed el, Object o, [Boolean returnElement] ) : 

  insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) :

 

          //创建dom结构，通过给的标签字符串

  createDom( Object/String o ) : HTMLElement

  eg：var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");

 

  （3）Ext

  //方法是执行在文件加载完之后

  onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : void

  get()//不在多说

  query( String path, [Node root] ) : Array

   http://www.w3school.com.cn/xpath/xpath_axes.asp

   语法看 Ext.DomQuery

  getCmp( String id ) : void---返回组建管理器管理的ID组件

  isEmpty( Mixed value, [Boolean allowEmptyString] ) : Boolean

  namespace( String namespace1, String namespace2, String etc ) : Object

  each( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Boolean

  apply( Object object, Object config, Object defaults ) : Object

  encode( Mixed o ) : String

  select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) 

  typeOf( Mixed value ) :判断参数是一个什么样的类型，返回的是字符串，eg：string、function 

//这个是直接到页面中获得元素的对象
var div01 = Ext.core.Element.fly("div01");
//鼠标滑过的时候增加一个样式滑出的时候移除样式,值是样式的名称
div01.addClsOnOver("divC");
//这个是直接到Ext.ComponentManagerMap中拿，没有的话，就用第一个到页面中拿，再返回
var input01 = Ext.get("input01");
   
var fn1 = function(){
 alert("单击B按钮调用这个函数")
}
//给一个输入框添加键盘B键响应功能
//key是你要触发的那个键，ctrl是否需要与ctrl键结合，fn是触发函数
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});
//和上面一本一样，只是添加更加复杂的，处理起来更加方便
/*第一个触发条件的参数是一个对象(条件可以进行组合):
  {key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/
//第二个是触发函数fn
input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
 alert("单击ctrl+x")
},input01);

function createChild(){
 var el = document.createElement("h5");
 el.appendChild(document.createTextNode("我是被追加的"));
 return el;
}
Ext.get("div02").appendChild(createChild());
//通过构造对象，来创建DOM
Ext.getBody().createChild({
 tag:'li',
 id:'item1',
 html:'我是第一个个节点'
});

3. ExtJS4.0中util包里面的一些工具类用法。

 

 （1）.Ext.util.CSS

         Ext.util.CSS.createStyleSheet(".c{color:red}","red");

         创建一个样式表，类似于你在css文件里面定义的内容。

         Ext.get("d1").addClsOnOver("c");

         在鼠标滑过时，动态的给某个元素对象的class赋值为刚刚定义的名为c样式表。

         Ext.util.CSS.getRule(".c",true);

         获得当前的样式的对象，可以从这个对象获得一些你需要的参数。        

 

         Ext.util.CSS.swapStyleSheet("sheet1","1.css");第一个参数是当前引用样式的ID，第二个是也是的URL路劲

         动态的切换，你所引用的样式表。（即假如你还有一个样式表2.css，里面1.css定义的样式名称一样，这时你可以用这个函数Ext.util.CSS.swapStyleSheet("sheet2","2.css")把目前引用1.css切换成2.css。）

         一般用于不同风格的样式切换。

         注意ID唯一。

         Ext.util.CSS.removeStyleSheet("red");

         移除当前，页面已经定义了的样式，传入样式的ID即可。

         Ext.util.CSS.updateRule(".c","color","#990055");

         更新某个已经定义了样式中的某个属性的值。

 （2）.Ext.util.ClickRepeater  click的转发器是Ext.util.Observable的子类

Ext.onReady(function(){
 //控制元素在指定时间内被单击(当前元素没有数失去焦点)
 var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{
  delay:3000,//首次单击时候的间隔事件
  interval:4000,//发生首次重复事件调用之后每一次事件的相隔时间
  stopDefault:true,//停止这个el上得默认单击事件
  handler:function(){
   alert("单击我");
  }
 });
 //第一次单击马上会触发事件 如果不去点击其他的元素那么3秒或就会自定执行第二次
 //一或会以4秒的间隔执行相应的程序
})

3）.Ext.util.DelayedTask 代替setTimeout

 （4）.Ext.util.Format 格式化的公共类

         用于一些字符串常用操作、日期以及小数的格式化等。

 （5）.Ext.util.MixedCollection 集合类

         强大之处在于它同时可以存放各工种各样的对象。并且提供很多操作集合里对象的方法。

 （6）.Ext.util.TaskRunner 模拟线程控制

         模拟多线程的实现。

         
Ext.onReady(function(){
 var runner = new Ext.util.TaskRunner();
 var task = {
  run:function(){
   Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
  },
  interval:1000
 }
 runner.start(task);
 Ext.get("b6").on("click",function(){
 
  runner.stop(task);
 })
})