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);
 })
})
posted @ 2013-04-27 18:07  赵雪丹  阅读(761)  评论(0编辑  收藏