当前位置: 代码迷 >> Web前端 >> EXT-常用笔记
  详细解决方案

EXT-常用笔记

热度:569   发布时间:2013-11-11 14:02:17.0
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="&lt;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的代表该符号的特殊字符串。
如:将“&” 、“<” 、“>” 等分别转换为"&amp;" 、“&gt;” 、"&lt;";
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".

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?



  相关解决方案