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';

});

})