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".