ExtJS 常用工具函数
J* 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';
});
})
