Extjs4 get getCmp getDom实践 动态修改tbar内容

博文http://blog.csdn.net/jazywoo123/article/details/7745468 中详细讲了Extjs 中的get、getDom、getCmp、getBody、getDoc 的区别，觉得很完整，在这里多一点补充。

先看代码：

		me.kPanel = Ext.widget("panel",{
			id:"kPanel",
			region:"center",
			title: ' 工作台 ',
	        	border:1,
	        	layout : {
				type : 'table',
				columns : 2,
				tableAttrs : {
					style : {
						width : 800,
						height : 650
					}
				}
			},
	        	defaults:{height:300, width:500},
			tbar:[{
				xtype:"label", id:"urlText", text:"www.test.com/test1/test2", handler:function(){;}
			},
				"->"
			,{
				xtype:"combo"
			}],
			items: [ me.anotherPanel]

		});

以上代码初始化了一个带有toolbar和anotherPanel的panel面板，需要在其他控件的功能中，动态修改tbar中id为urlText的label内容，使用get、getCmp和getDom的方法分别为：

Ext.get("urlText").setHTML(path);
Ext.getCmp("urlText").setText(path);                            	
Ext.getDom("urlText").innerHTML = path;

 

来看看三个方法分别获得的对象的关系：

Ext.getDom  ->  HTML控件     （内容为 ... ）

Ext.get         ->  Ext元素（Ext.Element，api吧）

Ext.getCmp  -> Ext组件（Ext.Component，其实就是js代码定义的对象）

右侧从上到下是被封装的关系：HTML控件封装在Ext.Element中，Ext.Element被封装在Ext.Component中。

因此有：

Ext.getDom().innerHTML=text，因为返回HTML控件，所以完全就是Javascript的方式；

Ext.get().setHTML(text)，查API吧，这个方法封装了Javascript Dom的innerHTML；

Ext.getCmp().setText(text)，Ext对象自动生成其属性的set、get方法，因为id为urlText的组件有text属性，所以用setText就可以设置了