`

Extjs备忘录

阅读更多
◆◆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节点对象等。看下面的示例代码:
Ext.onReady(function(){
    var e=new Ext.Element("hello");
    alert(Ext.get("hello"));
    alert(Ext.get(document.getElementById("hello")));
    alert(Ext.get(e));
});
Html页面中包含一个id为hello的div,代码如下:
<div id="hello">tttt</div>

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
getCmp方法-获得Ext组件
getCmp方法用来获得一个Ext组件,也就是一个已经在页面中初始化了的Component或其子类的对象,getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数,也就是组件的id。比如下面的代码:
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)等。比如下面的代码:
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元素中。
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”,该方法包含三个参数,第一个参数是要拷贝的目标对象,第二个参数是拷贝的源对象,第三个参数是可选的,表示给目标对象提供一个默认值。可以简单的理解成把第三个参数(如果有的话)及第二个参数中的属性拷贝给第一个参数对象。看下面的代码:
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方法时,在第三个参数中指定拷贝属性的默认值,比如下面的代码:
Ext.apply(b2,b1,{p3:"p3 value"});
alert(b2.p3);

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

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


◆◆Ext中键盘事件
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中触发按钮单击事件
Ext.getCmp('myButtonId').focus();



◆◆EXTJS同步方式请求
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("GET", listSecretariesUrl, false);
conn.send(null);
//获取响应的json字符串
var responseArray = conn.responseText;
分享到:
评论

相关推荐

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容。在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败...

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具,使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中,我们主要关注的是...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门

    ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门 ExtJS快速入门ExtJS快速入门 ExtJS快速入门 ExtJS...

    Extjs 2.2 Extjs 3.21 js

    ExtJS是一种广泛使用的JavaScript库,专门用于构建富客户端Web应用程序。这个压缩包包含了ExtJS的两个重要版本:2.2和3.2.1。这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解...

    包含各种类型的extjs小图标,Extjs4小图标

    ExtJS 是一个流行的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面(UI)元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库,专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本,提供了许多功能和组件,使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架,用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API,使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新,...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    ExtJS 是一个强大的JavaScript前端框架,用于构建富客户端应用程序。版本4.1是该框架的一个重要里程碑,提供了许多新功能和改进。对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架,它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    extjs备忘案例

    本人用来转移资料,于他人无用,请各位大侠们不要下载了,浪费积分

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    ExtJS 界面设计器

    ExtJS是一款强大的JavaScript库,主要用于构建富客户端的Web应用程序。其界面设计器,正如标题所示,是一种可视化的开发工具,能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...

    ExtJS4ExtJS5MD5 加密

    适用于ExtJS4、ExtJS5 MD5加密算法!

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑,它提供了稳定的基础和丰富的组件库。本文将...

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    JBPM4 SSH EXTJS JBPM SSH EXTJS

    JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS JBPM4 SSH EXTJS JBPM SSH EXTJS 希望对大家有帮助。

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

Global site tag (gtag.js) - Google Analytics