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控件     （内容为<label ...> ... </label>）

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就可以设置了