Extjs常用工具函数详解

 

/**
 *                        Extjs常用工具函数
 *
 * 1.编解码函数
 * encode和decode函数是专门用来对JSON数据进行编码和解码的函数。
 * Ext.encode()对应的解码方法为Ext.decode()。
 *
 * encode函数的作用是对对象、数组或其他值进行编码，将对象转换成JSON字符串的形式；
 * 因为HTTP协议只能发送字符串形式的参数，所以无法将JavaScript中的对象直接传递给后台，这就需要编码;
 * 因为HTTP规范规定，HTTP请求只能发送ISO-8859-1编码的字符，
 * 所以像中文这种无法使用ISO-8859-1编码的字符，还需要先转换成ISO-8859-1编码格式才能通过HTTP协议传输;
 *
 * 所以要经过两次编码后获得的最终参数绑定到url上然后传递给后台服务器进行处理：
 *  url:"http://url.com?json=" + encodeURIComponent(Ext.encode(obj))
 * decode()是将json对象解析为字符串
 * 被解析的字符串的格式不能是任意的，它必须符合JSON要求的字符串格式。　　　
  eg: function successFn(response,options){
  var obj = Ext.decode(response.responseText);//要把JSON数据解析成JavaScript对象,使用Ext.decode函数。
  alert(obj.username);
 }
 function failureFn(response,options){
  alert('请求失败');
 }
 Ext.Ajax.request({
  url:'form.jsp',
  success:successFn,
  failure:failure,
  params:{dsname:'INSERT'}
 });
 　　
 通过该对象的responseText或responseXML属性获得由服务器端返回的数据信息。　　
 *
 *2.Ext.each函数:当需要对数组中的每个元素进行同一种操作
 *  eg:
 *  var array = [1,2,3,4];
 * var sum = 0;
 *  Ext.each(array,function(item){
 * sum += item;
 * });
 * alert(sum);
 *3.Ext.DomQueryDomQuery的select()函数将接受我们定制的查询表达式，
 *    将HTML中所有满足条件安的标签作为结果返回。
 *4.标签提示
 *直接在HTML中为元素设置提示信息。
 <input type="button" value="标签型提示信息"
  ext:qtitle="提示的标题"
  ext:qtip="<b><i>提示的内容</i></b><p>下一行内容</p>"/>

  这些配置都以ext:作为前缀，
  qtitle代表提示标题，
  qtip代表提示内容，
  这些配置会在初始化时解析到EXT中，并在需要时显示。
  
 * 初始化先用Ext.QuickTips.init()函数进行初始化　　
 * 注册提示　
 *
 * 全局配置:
 * 最简单的办法就是利用Ext.apply()函数重新设置QuickTips的默认属性，如下示：
 * Ext.apply(Ext.QuickTips,{
 * maxWidth:200,
 * minWidth:100,
 * showDelay:50,
 * dismissDelay:1000,
 * hideDelay:500,
 * trackMouse:false,
 * animate:true
 *});
 * 下面是这些设置的含义：
 * maxWidth和minWidth分别用来设置提示框的最大宽度和最小宽度，这可能会导致提示内容自动换行。
 * showDelay表示鼠标悬停多久后显示提示信息，默认是0.5秒，这里的时间是以ms为单位。
 * dismissDelay表示提示信息显示的时间，默认为5秒。如果希望提示框不消失，也可以将dismissDelay直接设置为0。
 * hideDelay表示提示信息从开始消失到完全消失所需要的时间，默认是0.2秒。
 * trackMouse这个属性如果为true，提示窗口弹出来以后还会跟随鼠标一起移动。
 * autoHide的值一般都是true，它会根据dismissDelay和hideDelay的数值来实现逐渐消隐提示框的效果。
 *   这似乎也是一条让提示框永不消失的捷径，不过用过以后你就会知道，autoHide:false的结果是即使鼠标离开了DOM的范围，提示信息也不会消失。
 *   这个提示信息会一直挂在页面上，再也无法去掉。
 * animate表示是否使用动画效果。
 *
 *个体配置:
 *有两种方式：使用register()和直接写到HTML里　;
 *1.使用register()函数时，用到的参数和全局配置一样
  　Ext.QuickTips.register({
  taget:'ql',
  title:'第一种类型',
  text:'从外部注册到dom中提示信息',
  maxWidth:200,
  minWidth:100,
  showDelay:50,
  dismissDelay:1000,
  hidwDelay:500,
  trackMouse:false,
  autoHide:false,
  animate:true
   });　　
  
 　内置提示功能的EXT组件，只需要在QuickTips之后，再为这些组件设置对应的属性，就可以直接为它们设置对应的提示信息。
  组件名称    配置
  Ext.tree.TreeNode qtip
  Ext.Button   tooltip　　　
 *
 *6.保存状态:Ext.state
 *Ext.state.Manager的初始化功能必须在所有代码的最前面。
  * Ext.state.Manager.setProvider(new Ext.state.CookieProvider({}));//保持cookie状态  
  *
  *7.Ext.util.TaskRunner执行循环任务,
  *它提供了start()、stop()和StopAll()等方法，用来控制功能函数的启动和停止，
  *或一次性停止所有已经执行的功能函数。　
  *　　Ext.onReady(function() {
  *  var text = '';
  *  var task = {
  *      run: function() {
  *          text += new Date().toLocaleString() + "<br />";
  *          Ext.get('result').update(text);
  *      },
  *      interval: 3000
  *  };
  *  var taskRunner = new Ext.util.TaskRunner();
  * taskRunner.start(task);
  * );　
  *
  *
  * 8.使用Ext.KeyMap为对象绑定按键功能
  *
  * Ext.onReady(function() {
  *  var keyMap = new Ext.KeyMap('textarea', {
  *      key: Ext.EventObject.LEFT,
  *     fn: function(e) {
  *          keyMap.el.setWidth(keyMap.el.getWidth() - 10);
  *      }
  *  });
  *    Ext.get("dis").on('click', function() {
  *      keyMap.disable();
  *      Ext.get('result').update(keyMap.isEnabled());
  *  });
  *  Ext.get('en').on('click', function() {
  *      keyMap.enable();
  *      Ext.get('result').update(keyMap.isEnabled());
  *   });
  * });
  *
  *
  * 　　　　　　　　　　　　　　　　　　　　
 */

step1编写如下代码：

<div id="root1">
 <span class="span1">span 1</span>
 <span class="span2">span 2</span>
 <span class="span1">span 3</span>
 <span class="span2">span 4</span>
 <span class="span1">span 5</span>
</div>
<div id="root2">
 <span class="span0">span 0</span>
</div>

step2编写如下：

Ext.onReady(function(){
  Ext.state.Manager.setProvider(new Ext.state.CookieProvider({}));
  Ext.QuickTips.init();
 
 var target=Ext.get('root2');
 Ext.QuickTips.register({
 target:target,
 title:'span标签提示',
 text:'从外部注册到DOM里的提示信息'
 });

 

/* var array=[1,2,3,4];
 var sum=0;
 Ext.each(array,function(item){
 sum+=item;
 });
 alert("sum:"+sum);
 
 Ext.each(array,function(item,index,allArray){
 
alert("index:"+index);
alert("length:"+allArray.length);

});*/
 
 //用DomQuery获得页面上所有的span标签
 var array=Ext.DomQuery.select('span');
 Ext.each(array,function(elem){
 elem.style.backgroundColor='red';
 });
 
 //获得所有位于id=”root1”的div标签内的span标签
 
 var array=Ext.DomQuery.select('div#root1>span');
 Ext.each(array,function(elem){
 elem.style.backgroundColor='yellow';
 });

})