当前位置: 代码迷 >> Web前端 >> Ext惯用函数
  详细解决方案

Ext惯用函数

热度:116   发布时间:2013-07-09 09:50:48.0
Ext常用函数
函数一:Ext.onReady()
Ext的Dom都是动态生成的,而onReady的调用是发生在所有的Document对象都加载完毕的时候
,所以为了保障请求是安全的,应该保持所有的处理都在onReady中进行!


Ext.onReady(Function fn,Object scope,boolean override)

参数说明:
fn: 执行的函数
Object scope :fn 执行的范围,为可选参数。
boolean override:表示是否以scope作为fn的默认执行范围,为可选参数。
返回值:无

示例:
<script type="text/javascript">
Ext.onReady(function(){
     Ext.Msg.alert('提示','内容加载完毕,onReady后的调用');
});
</script>


--------------------------------------------
函数二:模式表选择器
Ext.select()
基于CSS来获取应用了该样式表的对象,即样式表的选择器。

调用格式:
Ext.select(String/Array selector,[Boolean unique],[HTMLElement/String root])
selector:字符串集
unique:为true,表示取得唯一的一个Element
root:选择器查询时的根节点。为空时则指定从document开始进行查询。

Boolean unique,HTMLElement/String root 为可选参数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例</title>
<link  rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
<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>
</head>

<body>
<div id="sub1"></div>
</body>
</html>
---------------------------------------
函数三:查询选择器 Ext.query()

调用格式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( )
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.encode( Object obj, Object config, Object defaults )
将定义的JSON对象进行解析,解析成字符串,是一标准的Ext.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>
  相关解决方案