- 浏览: 188109 次
- 性别:
- 来自: 北京
最新评论
-
WH_LPWH:
哥呀 牛逼 大赞一个
使用JAVA写出DBF出现乱码和数据错位 -
z390174504:
不错啊...ID和hide不能一样,多谢
后台取不到extJs2.3的comboBox手写输入的值 -
三里小龙:
linwei_211 写道三里小龙 写道mysql也会出现类似 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
linwei_211:
三里小龙 写道mysql也会出现类似的情况,但这个理由有点牵强 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
三里小龙:
mysql也会出现类似的情况,但这个理由有点牵强附会
java.sql.SQLException: 无法从套接字读取更多的数据
Ext中的get、getDom、getCmp、getBody、getDoc的区别(2009-12-24 18:03:13)转载标签:extgetgetdomgetcmp 分类:HTML
◆◆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.getElementById("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.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。比如下面的代码:
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的区别
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.getElementById("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.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。比如下面的代码:
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规范的字符串
发表评论
-
后台取不到extJs2.3的comboBox手写输入的值
2012-08-29 18:32 2802在用extJs2.3做页面的时候发现将comboB ... -
关于extjs(2.3) treepanel一点技巧
2012-08-01 16:02 11351.在做树的拖动的时候,遇到一个问题。树叶子节点无法进行app ... -
Ext.Ajax.request2.x实现同步请求
2012-06-25 11:08 3760Ext.Ajax.request在2.x是异步请求的 ... -
setAttribute()的使用方法与ie不兼容onclick事件解决方法
2011-12-31 13:12 2313setAttribute()的使用方法与ie不兼容onclic ... -
【仿IE顶部弹出提示】可用来设置公告可关闭
2011-12-31 13:11 1363第一种方式:基础写法 ... -
js 常用正则表达式表单验证代码
2011-08-19 11:20 1126js 常用正则表达式表单 ... -
EXT JS 常见问题FAQ
2011-08-19 10:50 1036EXT JS 常见问题FAQ 收藏 1) 如果组件之 ... -
js技巧
2011-08-19 10:47 1010javascript中几个有意思的 ... -
Combox下拉GridPanel菜单
2011-08-19 10:42 2578extjs Combox下拉GridPanel菜单 Ext ... -
重写时间控件,只有选择年月的界面
2011-08-19 10:39 5850下面是在ext官方网站上down的一个函数只显示年和月,不显示 ... -
修改ext中拖拽和CheckboxSelectionModel冲突的问题
2011-08-19 10:36 1707因为gridpanel定义了拖拽 所以致使选中gridpane ... -
浏览器窗口关闭事件的监听搜集
2011-08-19 10:16 1738方式一:(适用与IE浏览器,而且刷新不提示,只在点击浏览器关闭 ... -
GRID拖拽行的例子
2011-08-19 10:15 2853---------------------GRID拖拽 ... -
去掉gridPanel表头的全选框
2011-08-19 10:14 2237给gridpanel 加上listener即可 ,liste ... -
动态加载表单数据的例子
2011-08-19 10:11 1121<script type="text/java ... -
treepanel动态加载数据的例子
2011-08-19 10:10 1965var tree = new Ext.tree.TreePan ... -
gridpanel动态加载数据的例子
2011-08-19 10:07 1735<script type='text/javascrip ... -
combox带treepanel的例子
2011-08-19 10:06 1992new Ext.form.ComboBox({ id: '& ... -
项目开发中遇到的extjs常见问题
2011-08-19 10:04 12651.把一个汉字转成两个字符计数 Ext.getCmp('s ... -
event.keycode值大全
2011-08-19 10:02 834keycode 8 = BackSpace BackSpace ...
相关推荐
extjs 常用函数 getCMP() getDom()
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 ...data2Excel.export2Excel(Ext.getCmp('listSet'));
6.2.6 Ext.getDom() 6.2.7 Ext.isEmpty() 6.2.8 Ext.namespace() 6.2.9 Ext.each() 6.2.1 0Ext.apply() 6.2.1 1Ext.encode() 6.2.1 2Ext.htmlDecode() 6.2.1 3Ext.typeOf() 6.3 Ext.core....
Ext.getCmp(‘city-id-name’).setValue(cityid); 由于是store是异步加载的,所以他会先赋值再填充值到ComboBox,,这里就需要用: 当加载完成后再进行赋值 : 复制代码 代码如下: editCityStore.load({ params: { ...
代码如下: this.store.on(‘beforeload’, function() { Ext.apply(Ext.getCmp(“propTypeGrid”).store.baseParams, { 参数1: ‘111’, 参数2: ‘111’ }); }); 但是在 3.0 中这样无法增加参数,于是在 ExtJs官方...
Ext.getCmp("msgBasicMsg").getForm().submit({ url : 'insertMsg.action?msgBean=' + formData, //等待时显示 等待 waitTitle : '请稍等...', waitMsg : '正在提交信息...', params : { msgBean:Ext.encode...
Ext.getCmp(‘Tab2’).tbar.dom.style.height = ‘0px’; //显示 Ext.getCmp(‘Tab2’).tbar.show(); Ext.getCmp(‘Tab2′).tbar.dom.style.height = ’27px’;//高度可以自己定义 搞定,so easy!
我们可以通过Ext.getcmp()方法获取到GridPanel对象并通过重写的方法获取Excel字符串具体方法可以百度到。这个应该也不是什么大问题。 代码如下: //输出报表 function ExportReport(title) { var vExportContent = ...
这个是model 代码如下: Ext.regModel(‘commemModel’, { fields : [ ‘name’, ‘id’ ] }); 定义一个store设置id为s1的容器的默认值是 第一季度 代码如下: var ...function(){ Ext.getCmp(‘s1’).setValue(‘q1’);
例如:载入第一页的时候 代码: 代码如下: store.load({params:{start:0,limit:pageSize,Keyword:Ext.getCmp(‘input_name’).getValue()}}); 当单击下一页(上一页)时带参数 代码如下: doLoad : function(start){ ...
三、函数 getCmp(string _id):得到id为_id的组件对象。 getValue():得到文件框值。 四、其它 layout:只在在此布局下才能正确显示文件框的标签名,布局的宿主对象必面 是Ext.Container或者Ext.Container的子类。 ...
1 在子类中添加单击提交事件 代码如下: //登陆按钮单击事件 loginFun: function() { var f = Ext.getCmp(“loginForm”); //表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: “请稍候”, waitMsg: ...
获取 代码如下: function IsChecked(radioId) { return Ext.getCmp(radioId).checked; } 设置 代码如下: function SetRadio(radioId, isChecked) { Ext.getCmp(radioId).setValue(isChecked);//或者setValue(“on”)...
API兼容ExtJS的跨域Ajax请求,可以完全舍弃后端,客户端Ajax在回调中直接处理返回值的前台UI业务逻辑, 调用例子如下: Ext.data.JsonP.request({ url: 'http://192.168.81.33:8090/datastore/do/'+Ext.getCmp('...
//增加选择树,节点自动折叠 tree.on(“click”, function(node,e){ node.getUI().toggleCheck(true); }); tree.root.expand(); 2、方法二 代码如下: var tree = L5.getCmp(‘orgstrutree’); //增加选择树,节点...
遇到一个很奇怪的问题,ExtJs里的form提交创建的时候从session里取... 先说说我的解决方法 给hidden组件加个ID 然后在form提交的时候 触发个方法使Ext.getCmp(‘ID’).setValue(userId); 生效。就可以把数据提交上去了
代码如下:[removed]function editEsOrder(options,success,response){if (success){var tagModelManager_maxOrderIdJson=Ext.util.JSON.decode...Ext.getCmp(‘esorder’).setValue(orderValue) ;}}var tagModelManager