Ext中的get、getDom、getCmp、getBody、getDoc的区别

Ext中的get、getDom、getCmp、getBody、getDoc的区别
Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等,在使用中要注意区别使用。
◇get方法
get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象,Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是Ext.Element.get的简写形式。
get方法中只有一个参数,这个参数是混合参数,可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码:

Java代码
Ext.onReady(function(){   
    var e=new Ext.Element("hello");   
    alert(Ext.get("hello"));   
    alert(Ext.get(document.getElementByIdx("hello")));   
    alert(Ext.get(e));   
});   
Html页面中包含一个id为hello的div,代码如下:   
<div id="hello">tttt</div>  
Ext.onReady(function(){ var e=new Ext.Element("hello"); alert(Ext.get("hello")); alert(Ext.get(document.getElementByIdx("hello"))); alert(Ext.get(e)); }); Html页面中包含一个id为hello的div,代码如下: <div id="hello">tttt</div>

Ext.get("hello")、Ext.get(document.getElementByIdx("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
◇getCmp方法-获得Ext组件
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。比如下面的代码:

Java代码
Ext.onReady(function(){   
    var h=new Ext.Panel({   
        id:"h2",   
        title:" ",   
        renderTo:"hello",   
        width:300,   
        height:200  
    });   
    Ext.getCmp("h2").setTitle("新的标题");   
});  
Ext.onReady(function(){ var h=new Ext.Panel({ id:"h2", title:" ", renderTo:"hello", width:300, height:200 }); Ext.getCmp("h2").setTitle("新的标题"); });

在代码中,我们使用Ext.getCmp("h2").来得到id为h2的组件,并调用其setTitle方法来设置该面板的标题。
◇getDom方法-获得DOM节点
getDom方法能够得到文档中的DOM节点,该方法中包含一个参数,该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码:

Java代码
Ext.onReady(function(){   
    var e=new Ext.Element("hello");   
    Ext.getDom("hello");   
    Ext.getDom(e);   
    Ext.getDom(e.dom);   
});   
Html:<div id="hello">tttt</div>  
Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); }); Html:<div id="hello">tttt</div>

在上面的代码中,Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
◇getBody方法-得到文档的body节点元素(Element)
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素(Element),实质就是把document.body对象封装成ExtJS元素对象返回,该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。

Java代码
Ext.onReady(function(){   
    var h=new Ext.Panel({   
        title:"测试",   
        width:300,   
        height:200  
    });   
    h.render(Ext.getBody());   
});  
Ext.onReady(function(){ var h=new Ext.Panel({ title:"测试", width:300, height:200 }); h.render(Ext.getBody()); });

◇getDoc方法-获得与document对应的Ext元素(Element)
getDoc方法实质上就是把当前html文档对象,也就是把document对象封装成ExtJS的Element对象返回,该方法不带任何参数。

◆◆Ext中apply及applyIf方法的应用
apply及applyIf方法都是用于实现把一个对象中的属性应用于另外一个对象中,相当于属性拷贝。不同的是apply将会覆盖目标对象中的属性,而applyIf只拷贝目标对象中没有而源对象中有的属性。
apply方法的签名为“apply( Object obj, Object config, Object defaults ) : Object”,该方法包含三个参数,第一个参数是要拷贝的目标对象,第二个参数是拷贝的源对象,第三个参数是可选的,表示给目标对象提供一个默认值。可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象。看下面的代码:

Javascript代码
var b1={   
    p1:"p1 value",   
    p2:"p2 value",   
    f1:function(){alert(this.p2)}   
};   
var b2=new Object();   
b2.p2="b2 value";   
Ext.apply(b2,b1);   
b2.f1();  
var b1={ p1:"p1 value", p2:"p2 value", f1:function(){alert(this.p2)} }; var b2=new Object(); b2.p2="b2 value"; Ext.apply(b2,b1); b2.f1();

在上面的代码中,Ext.apply(b2,b1)这一语句把b1的属性拷贝到了b2对象中,因此调用b2的f1方法可以弹出"p2 value"的提示信息。尽管b2对象已经包含了p2属性值,但拷贝后该属性值会被覆盖。可以在调用apply方法时,在第三个参数中指定拷贝属性的默认值,比如下面的代码:

Javascript代码
Ext.apply(b2,b1,{p3:"p3 value"});   
alert(b2.p3);  
Ext.apply(b2,b1,{p3:"p3 value"}); alert(b2.p3);

这样会使得b2中包含一个p3的属性,值为"p3 value"。
applyIf方法的功能跟apply一样,只是不会拷贝那些在目标对象及源对象都存在的属性。比如把前面演示apply方法的代码改成applyIf,如下:

Javascript代码
Ext.applyIf(b2,b1);   
b2.f1();  
Ext.applyIf(b2,b1); b2.f1();

由于b2中已经存在了p2属性,因此,b2.f1()方法中引用this.p2的时候,得到的是"b2 value",而不是在b1中定义的"p2 value"。

◆◆Ext中键盘事件

Java代码
var form = new Ext.form.FormPanel({   
    baseCls: ‘x-plain‘,   
    layout:‘absolute‘,   
    url:‘save-form.php‘,   
    defaultType: ‘textfield‘,   
  
    keys:[{   
        key: [13],   
        fn:function() {   
            alert(‘您按了回车键!‘);   
        }   
    }],   
  
    items: [{   
        x: 0,   
        y: 5,   
        xtype:‘label‘,   
        text: ‘Send To:‘  
    },{   
        x: 60,   
        y: 0,   
        name: ‘to‘,   
        anchor:‘100%‘  
    }]   
});  
var form = new Ext.form.FormPanel({ baseCls: ‘x-plain‘, layout:‘absolute‘, url:‘save-form.php‘, defaultType: ‘textfield‘, keys:[{ key: [13], fn:function() { alert(‘您按了回车键!‘); } }], items: [{ x: 0, y: 5, xtype:‘label‘, text: ‘Send To:‘ },{ x: 60, y: 0, name: ‘to‘, anchor:‘100%‘ }] });

◆◆Ext中触发按钮单击事件

Java代码
Ext.getCmp(‘myButtonId‘).focus();  
Ext.getCmp(‘myButtonId‘).focus();

◆◆EXTJS同步方式请求

Java代码
var conn = Ext.lib.Ajax.getConnectionObject().conn;   
conn.open("GET", listSecretariesUrl, false);   
conn.send(null);   
//获取响应的json字符串   
var respText = Ext.decode(conn.responseText); //若符合JSON规范,转化为JSON数组
◆◆EXTJS decode encode方法

Ext.decode 等价于 Ext.util.JSON.decode() 将符合JSON规范的字符串转化为js数组或对象

Ext.encode 等价于 Ext.util.JSON.encode() 将js数组或对象转化为符合JSON规范的字符串

Ext中的get、getDom、getCmp、getBody、getDoc的区别

时间: 2024-12-25 14:19:11

Ext中的get、getDom、getCmp、getBody、getDoc的区别的相关文章

Ext中的get getCmp

var controlTmp = Ext.getCmp(s); controlTmp.setWidth(w); controlTmp.fieldLabel = label;//有些组件是不能在界面上重绘,但内存中已经改变 if((controlTmp.getXType().indexOf('combo') >-1)||(controlTmp.getXType().indexOf('datefield') >-1)){ controlTmp.getEl().parent().parent().p

Ext中包含了几个以get开头的方法

Ext中包含了几个以get开头的方法,这些方法可以用来得到文档中DOM.得到当前文档中的组件.得到Ext元素等,在使用中要注意区别使用. 1.get方法get方法用来得到一个Ext元素,也就是类型为Ext.Element的对象, Ext.Element类是Ext对DOM的封装,代表DOM的元素,可以为每一个DOM创建一个对应的Element对象,可以通过Element对象 上的方法来实现对DOM指定的操作,比如用hide方法可以隐藏元素.initDD方法可以让指定的DOM具有拖放特性等.get方

Ext中border方式时 region注意点

在用region时有时候会出错,于是自己测试了下 代码: Ext.onReady(function(){ var viewport = new Ext.Viewport({ layout:'border', //html: '<p>第二步,一共4步</p>', items:[{ region: 'north', split: true, title:'north', //north, south, east, west or center) border: true },{ reg

Ext中namespace的作用(转)

http://hintcnuie.iteye.com/blog/146813 Ext中在每一个页面中添加一个namespace呢,就像下面的代码: // create namespace Ext.namespace('myNameSpace'); // create application myNameSpace.app = function() { // do NOT access DOM from here; elements don't exist yet // private varia

[Ext JS 4] Extjs 之 initComponent 和 constructor的区别

initComponent 和 constructor是什么 Extjs 提供的组件还是挺丰富的, 但是有时候需求更丰富. 当Extjs 原生的组件无法实现我们的要求的时候, 就需要扩展Extjs 的组件实现自制组件了. 除了这种使用状况, 有时候对于一些相同却有使用很多的配置, 可能像把它独立出来,单独设为一种组件供大家调用, 节省开发时间和提高代码重用度. initComponent 和 constructor 就是Extjs 提供用来实现继承和扩展的方式. Ext.define 实现扩展

C#中数组、ArrayList和List三者的区别

在C#中数组,ArrayList,List都能够存储一组对象,那么这三者到底有什么样的区别呢. 数组 数组在C#中最早出现的.在内存中是连续存储的,所以它的索引速度非常快,而且赋值与修改元素也很简单. [csharp] view plaincopy <span style="font-family:SimSun;font-size:18px;">//数组 string[] s=new string[2]; //赋值 s[0]="a"; s[1]=&quo

phpcms v9中 action=&quot;position&quot; 和action=&quot;lists&quot;有什么区别, 以及action 的属性和值

action值的含义: lists 内容数据(文章?)列表 relation 内容相关文章 hits 内容数据点击排行榜 category 内容栏目列表 position 内容推荐位列表 phpcms v9中 action="position" 和action="lists"有什么区别, 以及action 的属性和值,布布扣,bubuko.com

关于Java中this和super的用法介绍和区别

1.this&super 什么是this,this是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针.当你想要引用当前对象的某种东西,比如当前对象的某个方法,或当前对象的某个成员,你便可以利用this来实现这个目的.要注意的是this只能在类中的非静态方法中使用,静态方法和静态的代码块中绝对不能出现this.his也可作为构造函数来使用.在后面可以看到 而什么是super,可以理解为是指向自己超(父)类对象的一个指针,而这个超类指的是离自己最近的一个父类.super的作用同样是可

java中,return和return null有什么区别吗?

java中,return和return null有什么区别吗? 最大的区别:return;方法的返回值必须是void!return null;方法的返回值必须不是 原始数据类型(封装类除过)和void! return 就是跳出方法...return null也是跳出方法并返回null.. 也就是说return null必须用在返回值不是void的方法里面..return可以用在任何方法里面 不要认为null就是没有值..null就是值..真正的没有值是..比如你String s;这个时候s是没有