EXT--常用笔记
//ext中文站
http://www.extjs.org.cn/
?
//ext4.1在线帮助文档?
http://extjs-doc-cn.github.io/ext4api/
?
?
//在控制台打出
console.dir(this.extData);
console.debug(this);
console.info("1111");
Ext.getCmp(‘cmpid’) 获取某一个控件，首先必须指定控件的id
Ext.get(‘id’) 获取某一个dom控件，该方法在fireFox里不支持 该方法等同于document.get()
?
?
//常用增、删、改、查功能
var isNewRecord; // 是否新增协议var record;// 选中的协议记录var checkEmptyFlag = true; // 必填字段验证// 设置新窗口标题 function setTitle(title) { setViewTitle(editView, title, "${app:i18n('newRebateProtocol')}"); } function setViewTitle(view, title, appendStr){ if ((title != null) && (title.length > 0)) { var ch = title.substr(title.length - 1, 1); if (((ch >= 'a') && (ch <= 'z')) || ((ch >= 'A') && (ch <= 'Z'))) { title = title + ' ';} } view.setTitle(title + appendStr); } // 查询 function onSearch() { if (queryView.getForm().isValid() == false) { Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('validateError')}'); } else { gridView.getStore().baseParams = queryView.getForm().getValues(); gridView.getStore().baseParams["limit"] = pagingBar.pageSize; gridView.getStore().load(); } } // 新增 function onAdd() { setTitle(btnAdd.text);isNewRecord = true; record = null; initDefaultValue();// 初始化删除页面上的数据editView.show();loadProtocolStateOptions();// 给下拉框赋值setEditable(editView, false); newRebateProtocol_customerCode.setDisabled(true);}// 修改function onEdit() {if (gridView.getSelectionModel().getSelections().length != 1) {Ext.MessageBox.alert('${app:i18n('prompt')}','${app:i18n('selectOneRecord')}');return;}setTitle("${app:i18n_menu_def('rebateProtocol.button.edit.name', app:i18n('edit'))}");isNewRecord = false;initDefaultValue();// 初始化删除页面上的数据editView.show();record = gridView.getSelectionModel().getSelections()[0];fillEditForm(); // 数据加载setEditable(editView, false);newRebateProtocol_customerCode.setDisabled(true);} // 初始化删除页面上的数据 function initDefaultValue(){deleteTempRecords();//删除临时列表数据editForm.getForm().reset();timeSegmentStore.removeAll();freightSetStore.removeAll();} // 数据加载 function fillEditForm(){fillForm(protocol_baseinfo, record.data);initCheckedFields();// 显示拥有折扣的选中状态} function fillForm(item, data) { if(data == null){ return; }var fieldName = item.name;if (item.isXType('checkbox') && item.relateName) {fieldName = eval(item.relateName + ".name");}if (fieldName != undefined) {fieldName = fieldName.substring(fieldName.lastIndexOf('.') + 1, fieldName.length);var value = data[fieldName];if (value != undefined) {if ((item.isXType('datefield') || item.isXType('timefield')) && (value.length == 19)) {value = value.replace('T', ' ' );value = Date.parseDate(value, "Y-m-d H:i:s");value = value.format(item.format);} else if (item.isXType('checkbox')) {value = (value == item.trueValue) ? true : false;}item.setValue(value);}}if (item.items && item.items.getCount() > 0) {for(var i = 0; i < item.items.getCount(); i++) {fillForm(item.items.get(i), data);}}} // 保存function onSave() {if(!isEditFormValid()){ return; }setEditable(editView, true);setTimeSegmentJSONData();//时间分段json串，提交后台做校验editForm.saveNewRebateProtocol();} // 设置是否可编辑function setEditable(item, canEdit) {if (item.modifytable == "false") {if (canEdit == true) {item.enable();} else {item.disable();}} else { item.enable();}if (item.items && item.items.getCount() > 0) {for(var i = 0; i < item.items.getCount(); i++) {setEditable(item.items.get(i), canEdit);}}} // 保存提交校验function isEditFormValid() { checkEmptyFlag = true; checkEmpty(protocol_baseinfo); if(!checkEmptyFlag){ Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('validateError')}'); return false; }if(!ckb_freight.checked && !ckb_insure.checked && !ckb_service_2.checked && !ckb_service_3.checked){Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('newRebateProtocol.checkboxgroup.noselected')}');return false;} if(newRebateProtocol_balanceCycle.getValue() == ""){newRebateProtocol_balanceCycle.markInvalid('${app:i18n('validate.notEmpty')}');return false;} if(!checkTimeRange(newRebateFreightCfg_startDt, newRebateFreightCfg_endDt)){ Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('newRebateProtocol.timeerror.badrange')}'); newRebateFreightCfg_startDt.markInvalid('${app:i18n('newRebateProtocol.timeerror.badrange')}'); return false; } return true; } // 校验必填字段 function checkEmpty(item) { if(item.isXType('field')){ if(item.fieldLabel && (item.fieldLabel != '') && (item.fieldLabel.indexOf("*") != -1) && item.isVisible() &&(item.getValue() == null || (item.getValue() + '' == ''))){item.markInvalid('${app:i18n('validate.notEmpty')}');if(checkEmptyFlag){ checkEmptyFlag = false;} } }if (item.items && item.items.getCount() > 0) {for(var i = 0; i < item.items.getCount(); i++) {checkEmpty(item.items.get(i));}} } // 校验开始结束时间 function checkTimeRange(dateFieldFrom, dateFieldTo){ if(dateFieldFrom.getValue() != '' && dateFieldTo.getValue() != ''&& dateFieldFrom.getValue() > dateFieldTo.getValue()){ dateFieldFrom.focus(); return false; }return true; } // 重置function onReset() {editForm.getForm().reset();if (isNewRecord == false) {fillEditForm();}} // 删除临时记录（含运费、保费、签回单等）。function deleteTempRecords(){Ext.Ajax.request({url: 'deleteTempRecords.action', method: 'POST', async: false,//表示同步waitMsg: "${app:i18n('saving')}",success: function(response) {},failure: function (response) { if(Ext.util.JSON.encode(response.status) == 0){ Ext.MessageBox.alert('${app:i18n('prompt')}','${app:i18n('prompt.connection.exception')}'); } else { Ext.MessageBox.alert('${app:i18n('prompt')}','${app:i18n('prompt.exception')}'); }}});} function showSaveSuccessInfo(form, action) {if (action.result.status == "ok") {Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('saveSuccess')}');editView.hide();onSearch();} else if(action.result.status == "noselect"){Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('notselect')}');} else if(action.result.status == "isRepeat"){Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('rebateProtocol.error.exists')}');}else {Ext.MessageBox.alert('${app:i18n('saveFailure')}', action.result.status);setEditable(editView, false);}}function showSaveFailureInfo(form, action) {if (action.failureType == "client") {Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('validateError')}');} else {Ext.MessageBox.alert('${app:i18n('prompt')}', '${app:i18n('saveFailure')}');}}?
?
?
//this
调用函数时，你可以把this想象为每个函数内的一个特殊（躲起来的）参数。无论什么时候，JavaScript都会把this放到function内部。
它是基于一种非常简单的思想：
如果函数直接是某个对象的成员，那么this的值就是这个对象。
如果函数不是某个对象的成员那么this的值便设为某种全局对象（常见有，浏览器中的window对象）。
?
?
//var
用关键字var在内部声明，相当于声明局部变量（局部声明也是在一条链上，即Scope Chain 作用域链上,Frank注）：
i = 44;
function fn2() {
??? var i = 55;
??? alert(i);
}
fn2();//将得到55。声明在函数fn2的变量i是一个本地变量（局部变量），和等于44的全局变量i 44没什么关系。
alert(i);//这会访问全局变量i，显示44。
?Ext.util.JSON编码和解码JSON对象
1.decode( ) 该方法用于将JSON规划格式的String进行解码成为一个JSON的Object，如果JSON字符串为无效 或不符合JSON规则，则会抛出一个异常来终止该方法的调用。 var jsonStr="{name:'the json name',value:'the json sample value'}"; var obj = Ext.JSON.decode(jsonStr,true); Ext.Msg.alert("提示","jsonstr:"+obj); 2.encode（） 本方法主要将对象数组转换成String型的值。 var a=[b,'c']; var endobj=Ext.JSON.encode(a); Ext.Msg.alert("提示","jsonstr:"+endobj); ?
Ext.namespace( String namespace1, String namespace2, String etc ) : void
创建命名空间：
如Ext.namespace("Company","MyNS.mydata","Data.format.string")
然后可以创建如MyNS.mydata.doit=function(){…}的接口
注：命名空间的简易调用：Ext.ns()，在Ext Api中未给出此用法。
Ext.namespace('cn.sh.ideal.ui');
//双击事件
this.listPanel.on('rowdblclick',this.addClicked,this);
//抛出异常
if(!this.infoUrl){
? throw 'config error : lost of property [infoUrl]';
}
Ext.emptyFn
用于返回一个空函数，便于在程序中创建空函数。Ext.emptyFn返回function(){}
定义对象
var o1 = {testvar:22, fun:function() { alert('o1: ' + this.testvar); }};
var o2 = {testvar:33, fun:function() { alert('o2: ' + this.testvar); }};
o1.fun.call(o2);//将调用（执行）的o1.fun方法但this会执行o2
alert(o1.testvar);//对象可以有它自己的属性（像上面的testvar）,这些属性允许从内部或是外部均是可见的。
Ext.util.Observable
一个抽象基类，为事件机制的管理提供一个公共接口,如果你希望的类可以有事件，就继承它吧
?
Ext.onReady(Function fn,Object scope,boolean override)
Ext的Dom都是动态生成的，而onReady的调用是发生在所有的Document对象都加载完毕的时候
，所以为了保障请求是安全的，应该保持所有的处理都在onReady中进行！
参数说明：
?????? fn: 执行的函数
?????? Object scope ：fn 执行的范围，为可选参数。
?????? boolean override：表示是否以scope作为fn的默认执行范围，为可选参数。
?????? 返回值：无
示例：
<script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.alert('提示','内容加载完毕，onReady后的调用'); }); </script> ?
?
Ext.select(String/Array selector,[Boolean unique],[HTMLElement/String root])
模式表选择器
参数说明：?
?????? selector:字符串集?
?????? unique：为true，表示取得唯一的一个Element?
?????? root：选择器查询时的根节点。为空时则指定从document开始进行查询。
?????? Boolean unique,HTMLElement/String root 为可选参数
示例：
<script type="text/javascript"> Ext.onReady(function(){ //创建一个panel var panel= new Ext.Panel({ title:'示例', renderTo:'sub1', width:'300px', html:"<div id='div1' style='height:200px'> 我的id是sub3</div>" }); //通过选择器选择一个唯一的id为div1的Element节点 var el = Ext.select(["div1"],true,"fat1"); el.on("click",function test(){ Ext.Msg.alert("提示","您点击了id为div1的节点"); }); }); </script> <body> <div id="sub1"></div> </body>?
?
Ext.query(String path,[Node root]);
查询选择器
参数说明：
???? path：选择器查询时的节点path
???? root：选择器查询时的根节点。为空时则指定从document开始进行查询
???? 返回值：Array 符合条件的节点的数组
示例：
<script type="text/javascript"> Ext.onReady(function(){ //创建一个panel var panel= new Ext.Panel({ title:'示例', renderTo:'sub1', width:'300px', html:"<div id='div1' style='height:200px'> 我的id是sub3</div>" }); //选择元素为Div其id为Div1的节点数组 var el=Ext.query("#div1"); if(el.length>0){ Ext.Msg.alert("提示","取得了"+el.length); } }); </script> ?
?
Ext.getCmp(String id);
参数说明：
???? id:指定组件的id.
???? 返回Ext.Component管理的指定id的component对象,实际是Ext.ComponentMgr.get(id)的包装调用。
示例：
<script type="text/javascript"> Ext.onReady(function(){ //创建一个panel var panel= new Ext.Panel({ title:'示例', id:'panel1', renderTo:'sub1', width:'300px', html:"<div id='div1' style='height:200px'> 我的id是sub3</div>" }); var el=Ext.getCmp("panel1"); Ext.Msg.alert("提示","类型为"+el.getXType()); }); </script> ?
?
Ext.apply(Object obj, Object config, Object defaults )
参数说明：
???? obj: 目标拷贝对象
???? config:源拷贝对象
???? defaults:默认属性值
???? 返回值：obj ，即拷贝完成的对象
为指定对象拷贝属性，或以默认的属性初始化一个对象。
在调用时表示将第2个参数config所有的属性拷贝到第1个参数obj对象的属性中，如果config为空，将第3个参数defaults的属性
拷贝到obj 的属性中。
?
Ext.applyIf(Object obj, Object config)
功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。?
?
?
?
//同步请求?
var row = config.listConfig.sm.getSelected();var resp = Ext.lib.Ajax.getConnectionObject().conn;resp.open("GET", 'fecthPhotoPath.app?userId=' + row.id + '&&tmp=' + Math.random(),false);resp.send(null);var res = Ext.decode(resp.responseText);if(res.photoPath){ console.info("-------------------1---------------------"+res.photoPath);}???
//异步请求
var row = config.listConfig.sm.getSelected();var params ={};params['userId'] = row.id;Ext.Ajax.request({ url : 'fecthPhotoPath.app?tmp=' + Math.random(), params : params, method : 'post', success : function(resp, options){ var res = Ext.decode(resp.responseText); if(res.photoPath){ console.info("-------------------1---------------------"+res.photoPath); } }});?
?
?
Ext.Ajax.request异步提交表单
?服务器端：loginServer.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String userName=request.getParameter("username"); String password=request.getParameter("password"); String msg=""; //服务端程序根据用户输入的用户名和密码判断是否合法，如果输入正确就返回成功 if(userName.equals("11")&& password.equals("11")){ msg="登录成功"; }else{ msg="登录失败"; } response.getWriter().write(msg);//将登录信息写回客户端 %> ?客户端：mylogin.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js" ></script> <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script> <form id="loginForm"> 用户名：<input name="username" type="text"> 密码：<input type="password" name="password" > <input type="button" value="登录" onclick="login()"> </form> <script type="text/javascript"> function login(){ var requestConfig={ url:'extajax/loginServer.jsp',//请求的服务地址 form:'loginForm', //指定要提交的表单Id callback:function(options,success,response){ //回调函数 options是请求调用的参数 var msg=["请求是否成功:",success,"\n","服务器返回值:",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig);//发送请求 } </script> ??
Ext.Ajax.request提交JSON数据
使用json-lib-2.4-jdk15.jar 在后台对JSON数据进行解析
lib下必须添加json所需的jar包：
json-lib-2.4-jdk15及其依赖jar包
相关jar包：
??? commons-beanutils-1.8.0.jar
??? commons-collections-3.1.jar
??? commons-lang-2.5.jar
??? commons-logging-1.1.1.jar
??? ezmorph-1.0.6.jar
??? json-lib-2.4-jdk15.jar
??? json-lib-2.4-jdk15-javadoc.jar
??? json-lib-2.4-jdk15-sources.jar
服务器端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page import="java.io.BufferedReader" %> <%@ page import="net.sf.json.*" %> <% BufferedReader in=request.getReader(); StringBuffer jsonStr=new StringBuffer(); String str=""; while((str=in.readLine())!=null){ jsonStr.append(str); } JSONObject jsonObj=JSONObject.fromObject(jsonStr.toString()); String userName=jsonObj.getString("userName"); String password=jsonObj.getString("password"); String msg=""; if(userName.equals("11")&&password.equals("11")){ msg="登陆成功'json方式'"; }else{ msg="登陆失败'json方式'"; } response.getWriter().write(msg); %> 客户端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js" ></script> <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script> <form id="jsonloginForm"> 用户名：<input name="username" type="text"> 密码：<input type="password" name="password" > <input type="button" value="登录" onclick="jsonlogin()"> </form> <script type="text/javascript"> function jsonlogin(){ var requestConfig={ url:"extajax/loginServerJson.jsp", //请求的服务器地址 jsonData:getJson(), //发送JSON对象 callback:function(options,success,response){ var msg=["请求是否成功：",success,"\n","服务器返回值：",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig); } function getJson(){ var name=document.forms[0].username.value; var pwd=document.forms[0].password.value; var jsonObj={ userName:name, password:pwd } return jsonObj; //将JSON对象返回 } </script> ??
?
Ext.Ajax.request提交XML数据
在lib下要有dom4j-1.6.jar
服务器端：loginServerXml.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ page import="org.dom4j.*" %> <%@ page import="org.dom4j.io.*" %> <% SAXReader sax=new SAXReader(); Document dom=sax.read(request.getInputStream()); Element root=dom.getRootElement(); String userName=root.element("userName").getStringValue(); String password=root.element("password").getStringValue(); String msg=""; if(userName.equals("11")&&password.equals("11")){ msg="登陆成功xml方式"; }else{ msg="登陆失败xml方式"; } response.getWriter().write(msg); %> ?客户端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"> <script type="text/javascript" src="ext-all.js" ></script> <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script> <form id="xmlloginForm"> 用户名：<input name="username" type="text"> 密码：<input type="password" name="password" > <input type="button" value="登录" onclick="xmllogin()"> </form> <script type="text/javascript"> function xmllogin(){ var requestConfig={ url:'extajax/loginServerXml.jsp',//请求的服务器地址 xmlData:getXml( ), //发送xml文档对象 callback:function(options,success,response){ var msg=["请求是否成功：",success,"\n","服务器返回值：",response.responseText]; alert(msg.join('')); } } Ext.Ajax.request(requestConfig); //发送请求 } function getXml(){ var name=document.forms[0].username.value; //获取表单中的用户名信息 var pwd=document.forms[0].password.value; //获取表单中的密码信息 var dom=new ActiveXObject("msxml2.DOMDocument"); //创建Dom对象 var header=dom.createProcessingInstruction("xml","version='1.0'"); //创建xml文件头 dom.appendChild(header); var root=dom.createElement("loginInfo");//创建根节点loginInfo var userName=dom.createElement("userName"); userName.text=name; //为节点赋值 var password=dom.createElement("password"); password.text=pwd; //为节点赋值 root.appendChild(userName); //将userName添加到根节点中 root.appendChild(password);//将password添加到根节点中 dom.appendChild(root); //将根节点添加到root return dom; } </script> </body> </html> ?
?
Ext.util.Format提供的常用格式化方法
<script type="text/javascript"> Ext.onReady(function(){ var str="<table width='300' cellspacing=1 border=1 cellpadding=1><tr><td>table string</td></tr></table>"; var str1="action"; var dat=new Date(); var str2=12345; var str3=1.2345; Ext.Msg.alert("提示", "原str为"+str+"<br> ellipsis(str,5)后为："+ Ext.util.Format.ellipsis(str,5)+"<br><br>"+ "原str1为"+str1+"<br>进行capitalize(str1)后为："+Ext.util.Format.capitalize(str1)+"<br><br>"+ "原dat为"+dat+"<br>进行date(dat,'yyyy/mm/dd')后为："+Ext.util.Format.date(dat,'yyyy/mm/dd')+"<br><br>"+ "注意调用htmlDecode(str)后展现出来的是一个带边框的表格：<br>"+Ext.util.Format.htmlDecode(str)+"<br>"+ "原str1为:"+str1+"<br>进行lowercase(str1)后为："+Ext.util.Format.lowercase(str1)+"<br>"+ "原str2为"+str2+"<br>进行number后为："+Ext.util.Format.number(str2,"-1234.0")+"<br>"+ "原str3为"+str3+"<br>进行round后为："+Ext.util.Format.round(str3,2)+"<br>"+ "进行截取字符串substr()后的str1为："+Ext.util.Format.substr(str1,0,2)); }); </script> ?1.Ext.util.Format.ellipsis(String value,Number length)
该函数用于将指定的字符串超长部分用省略号代替并返回。
value:需要进行切割省略的字符串文本
length：表示指定的长度，超长的部分用省略号代替
返回值：
String 截取字符串value的第0个字符到length的字符，并将最后的3字符替换成". . ." 一并返回。
2. capitalize( )
Ext.util.Format.capitalize(String value)
用于转换指定字符串成小写并返回。
value:需要进行转抽象的字符串文本。
返回值：
String ：将字符串value的第一个字符换成大写，其他所有的字符都成小写，返回该字符串。
3.date( )
Ext.util.Format.date(Mixed value,[String format])
将日期文本按指定的格式进行转换。
value：表示的是日期
format：表示的是日期格式
返回：
String 将字符串value转换成format指定的日期格式类型，并返回该字符串。
4.htmlEncode( )
将参数value进行HTML字符的替换并返回。将字符串中的特殊字符转换成HTML的代表该符号的特殊字符串。
如：将“&” 、“<” 、“>” 等分别转换为"&" 、“>” 、"<";
5.htmlDecode( )
是htmlEncode的逆过程。
6.stripTags( )
将提供字符串中的HTML标签进行替换并返回替换后的字符串。
7.lowercase( )
将指定的字符串变成小写
8.number( )
将指定的number数字按指定的格式进行处理后返回。
9.round( )
按指定的位数进行小数的截取返回。??
?
?
Ext.util.ClickRepeater 事件的配置和触发?
?Ext.util.ClickRepeater 继承Ext.util.Observable的包装类，可应用于任何Element。是一个click的转发器，起到click事件的转发和绑定作用，是所有事件绑定的原始类。
初始化Ext.util.ClickRepeater，配置并触发click , mousedown , mouseup 等事件。?
<script type="text/javascript"> Ext.onReady(function(){ var pan=new Ext.Panel({ title:'event', html:'<div id="mydiv"><input type="button" value="点击" name="but"/></div>', height:200, width:300 }); pan.render("hr_panel"); var el=Ext.get("mydiv"); //实例化并初始化 var cl=new Ext.util.ClickRepeater(el,{ delay:300, //首次重复的时间间隔 interval:3002, //发生完首次重复点击后，若第二次再重复点击的时间间隔 stopDefault:true, pressClass:'pl', handler:function rep(){ Ext.MessageBox.alert("点击提示","点击触发了！"); } }); }); </script> ?
?Ext.KeyNav为元素提供简单的按键处理方法
<script type="text/javascript"> Ext.onReady(function(){ var panel=new Ext.Panel({ title:'Ext.KeyNav示例', frame:true, renderTo:'sub1', width:'300px', html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+ "<div id='id01' style='background-color:#3399FF;height:20px;'"+ "请点击我，然后<br>按键盘 enter键</div>" }); var el=Ext.get("id01");//绑定事件 var nav=new Ext.KeyNav(el,{ "left":function(e){ Ext.Msg.alert('提示','向左的按键被按下'); //alert('向左的按键被按下了'); }, "right":function(e){ alert('向右的按键被按下了'); }, "enter":function(e){ alert("'回车键被按下了'"); }, scope:el }); nav.enable(); //Ext.KeyNav.enable将失效的键盘绑定事件生效,反之Ext.KeyNav.disable()是废弃已绑定的配置 //都是公有方法，调用时通过实例化Ext.KeyNav后即可调用 }); </script> <div id="sub1"></div> Ext.KeyMap提供更灵活强大的对按键的处理方法
一个键值可以被映射到多个操作控制上，它的构造器支持config对象来作为详细绑定定义。
在将回调函数绑定到KeyMap对象时，KeyMap随时将会触发期望的组合键的函数签名。
<script type="text/javascript"> Ext.onReady(function(){ var panel=new Ext.Panel({ title:'Ext.KeyNav示例', frame:true, renderTo:'sub1', width:'300px', html:"<div id='div1' style='width:200px;height:200px;padding:10px;'>"+ "<div id='id01' style='background-color:#3399FF;height:20px;'"+ "请点击我，然后<br>按键盘 enter键</div>" }); var el=Ext.get("id01"); var map=new Ext.KeyMap(el,{ key:Ext.EventObject.ENTER, fn:handleKey, scope:this }); map.addBinding({ //绑定一个设置对象到KeyMap实例 key:'abc', shift:true, fn:handleKey, scope:this }); //表示当按下shift+abc时调用的函数handleKey function handleKey(){ Ext.Msg.alert("the abc+shift key is touch success!"); } }); </script> 加入一个新的绑定配置到绑定对象 map.addBinding（） ??
?
Ext.addBehaviors( Object obj ) : void
为页面中一个或多个元素添加事件
元素使用css规则查找，其中元素与事件用@隔开
Ext.addBehaviors({
?? //为id为foo的元素下的所有a元素添加click事件
?? '#foo a@click' : function(e, t){
?????? // do something
?? },
?? // 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
?? '#foo a, #bar span.some-class@mouseover' : function(){
?????? // do something
?? }
});?
?
Ext.id( [Mixed el], [String prefix] ) : String?
返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；
如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
如果需要指定特定的前缀，则需要传入第二个参数，如Ext.id(el,”myPrix-”)，默认前缀为ext-gen，如默认返回id可能为ext-gen4，指定了前缀后可能返回myPrix-4
?
?
Ext.each( Array/NodeList/Mixed array, Function fn, Object scope ) : void
遍历array并对每项分别调用fn函数。如果array不是数组则只执行一次。
如果某项fn执行结果返回false（必须是false，undefined无效），遍历退出，后面的array项将不被遍历。
遍历过程中每次为fn传入参数分别为[当前数组项]，[当前索引]和[数组array]三个参数。
Scope用于设定fn函数中的this指针。
如
Ext.each([1,3,5,7],function(v,i,a){
????? alert("index: "+i+" value: "+v+" array.length："+a.length)
});
将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4?
index:2 value:5 array.length：4?
index:3 value:7 array.length：4
Ext.each([1,3,5,7],function(v,i,a){
??? alert("index: "+i+" value: "+v+" array.length："+a.length);
??? return v!=5;? //到第三项后遍历退出
});
将循环弹出：
index:0 value:1 array.length：4
index:1 value:3 array.length：4?
index:2 value:5 array.length：4??
?查找所有的DIV
var nodes = Ext.query('div');
Ext.each(nodes,
function(item,index,allItems){
??? document.write(index+'<br/>');
??? });
按CLASS查找对象
var msgLinks = Ext.query('.msg');
Ext.each(msgLinks, function(item,index) {
??? // Do something with the element here.
});
迭代form 中的select
var select = Ext.get('countries-select');
Ext.each(select.options, function(item,index) {
??? // Do something with the item here.
});
其中Ext.query(path,[root]),是Ext.DomQuery.select(path,[root])的缩写。DomQuery提供了高性能的 selector/XPath 可重用编译查询功能，可用于HTML和XML，支持CSS3.
?
?
?Ext. escapeRe( String str ) : String
将属于正则里的特殊字符进行转义。
如
Ext.escapeRe("(ab)$\sa342{}[dd]")将返回\(ab\)\$sa342\{\}\[dd\]。
Ext.callback(cb, scope, args, delay) :void? //该方法为Ext的内部方法
调用一个函数或延迟调用一个函数。
Cb:调用的函数。
scope:cb中this指针。
args：传如cb的参数，以数组形式表示。
delay：延迟多少毫秒执行cb。
如
Ext.callback(function(x,y){alert(x+y)},this,[3,5],1000);将于1秒钟后弹出8，即3+5的结果。
Ext.getDom( Mixed el ) : HTMLElement
根据传入的id/dom节点/Ext的Elemenet对象，返回其dom对象。
如alert(Ext.getDom("a").innerHTML);或
alert(Ext.getDom(document.getElementById("a")).innerHTML);
将返回id为a的元素的innerHTML内容。
Ext.getDoc()/Ext.getBody() : Ext.Element
分别返回页面的document对象和body对象，返回值为Ext的Element对象，而非Dom对象。
Ext.getCmp( String id ) : Ext.Component
根据传入的html元素id返回该元素的组件类型，返回值为Ext的Component对象。
必须保证该id对象的元素是Ext的一个内部组件（通过Ext创建的组件），否则什么都不返回。
Ext.num( Mixed value, Number defaultValue ) : Number
验证value是否是一个数字，如果是则直接返回否则返回defaultValue。
如
alert(Ext.num(5,7))返回5，alert(Ext.num("5",7)) 返回7
Ext.destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void
销毁创建的Element或组件(Component)，即销毁其所有的事件监听，dom节点，并调用对象本身的destory方法（如果存在的话），传入的参数类型为Ext.Element或Ext. Component，可以一次性传入多个对象进行销毁。
如
Ext.destory(menu,el,Button);会销毁menu,el,Button三个对象。
Ext.removeNode(htmlElement el): void? //Ext内部方法
删除指定的dom节点。传入参数为dom对象。
如
Ext.removeNode(document.getElementById("ab"));
Ext.type( Mixed object ) : String
返回传入的对象的类型。
包括如下类型：
string,number,boolean,function,object,array,regexp,element,nodelist,textnode,whitespace
如
Ext.type("ab")返回string
Ext.type(20)返回number
Ext.type([3,5,6])返回array
Ext.type(/reg/)返回regexp
Ext.type(document.body)返回element。
Ext.isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean
检查一个值是否为null/undefined或是否是空，如果是则返回true。
如果传入allowBlank为true，则只检查是否为null或undefined。
如：
Ext.isEmpty("a")返回false，
Ext.isEmpty("")返回true，
Ext.isEmpty("",true)返回false，
Ext.isEmpty(null)返回true。
?
?
?
Ext.encode( Object obj, Object config, Object defaults )
将定义的JSON对象进行解析，解析成字符串，是一标准的Ext.JSON.encode.在调用时表示将参数Object进行解析，返回字符串。
Ext.encode(object)是Ext.util.JSON.encode(object)的缩写?
参数说明：
???? obj: 目标拷贝对象
???? 返回值：string ,即将Object进行解析的字符串。
示例：
<script type="text/javascript"> Ext.onReady(function(){ var person={name:'Tom',age:24}; //定义一个JSON对象 var panel=new Ext.Panel({ title:'encode', frame:true, renderTo:'sub1', width:'300px', html:"<div id='div1' style='height:200px'>将对象进行转换成字符串</div>" }); var el=Ext.select(["div1"],true); el.on("click",function tes(){ Ext.Msg.alert('提示',Ext.encode(person));//打印将对象转变成字符串 }); }); </script> var colorsArray = new Array();
colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';
//转换到JSON
var colorsJson = Ext.encode(colorsArray);?
?
Ext.decode()
Ext.decode(json)是Ext.util.JSON.decode(json)的缩写
var colorsJson = '["Blue","Red","white"]';
var colorsArray = Ext.decode(colorsJson);?
?
Ext.urlEncode( Object o ) : String
将一个json对象转换称url参数串，支持通过数组为一个参数设定多个值。
如将{a:1,b:2,c:[1,3,5,7]}转换为a=1&b=2&c=1&c=3&c=5&c=7
Ext.urlDecode( String string, [Boolean overwrite] ) : Object
将url参数串转换为json对象，overwrite如果为true，则后面的同名参数值覆盖前面的同名参数值（默认为false即不覆盖而以数组形式返回）。
如
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7")
返回的对象内容为{a:1,b:2,c:[1,3,5,7]}
Ext.urlDecode("a=1&b=2&c=1&c=3&c=5&c=7",true)
返回{a:1,b:2,c:7}?
?Ext.type
var colorsArray = new Array();
colorsArray[0] = 'Blue';
colorsArray[1] = 'Red';
colorsArray[2] = 'White';
var colorsArrayType = Ext.type(colorsArray); // colorsArrayType的值是 "array".
var isArray = Ext.isArray(colorsArray); // isArray 是 true
Ext.num
var aNumber = 1;
var aString = '1';
?var number = Ext.num(aNumber, 0);
// number 是 1.
number = Ext.num(aString, 0);
// 发现 aString 不是数字, 返回0
?
?
?Ext.value
var empty;
?var notEmpty = Ext.value(empty, 'defaultValue', false); // notEmpty 是 'defaultValue'
?Ext.util.Format.undef
var sample;
var defined = Ext.util.Format.undef(sample); // defined 是空串
sample = "sample is now defined";
defined = Ext.util.Format.undef(sample); // defined 是 "sample is now defined".
?
?
?
??
?
?
?
?
?
?
?
?
?
?
?