2.5.1　Ext.get方法的使用

2012-09-13 14:21 陆凌牛 机械工业出版社 字号：T | T

综合评级：

想读(2)  在读(0)  已读(1)   品书斋鉴(0)   已有3人发表书评

《Sencha Touch权威指南》第2章Sencha Touch 2.0基础知识，本章将从一个简单的示例页面开始，介绍Sencha Touch 2.0的一些基础概念，为其他章节的学习奠定一个良好的基础。本节为大家介绍Ext.get方法的使用。

AD：51CTO网+ 首届中国APP创新评选大赛火热招募中……

2.5　对DOM的访问及控制

Sencha Touch之所以能够非常好地完成工作，是因为它可以实现对DOM的访问，并且提供了对DOM进行控制的方法。在这些方法中，Ext.get方法是最常用的。

2.5.1　Ext.get方法的使用

Ext.get方法如以下代码所示：

Ext.get('myPanel') 

修改代码清单2-2，修改后的代码如代码清单2-3所示（注意删除面板组件的style配置选项）。

代码清单2-3　Ext.get方法使用示例

Ext.application({  
name: 'MyApp',  
icon: 'images/icon.png',  
glossOnIcon: false,  
phoneStartupScreen: 'images/phone_startup.png',  
tabletStartupScreen: 'images/tablet_startup.png',  
launch: function() {  
var panel = Ext.create('Ext.Panel', {  
  　   　id:'myPanel',  
　html: '一个简单的示例面板'  
});  
　 Ext.Viewport.add(panel);  
　 Ext.get('myPanel').addCls('colorRed');  
}  
}); 

这段代码在执行了Ext.get方法之后执行了addCls方法，作用是为面板组件生成的元素添加使用一个CSS样式类，类名为colorRed，因此，在index.html文件的head标签中临时加入一个colorRed样式类。代码如下：

<style> 
.colorRed{  
color:red;  
}  
</style> 

在浏览器中访问修改后的页面，页面中“一个简单的示例面板”文字将变为红色。

需要注意的是，Ext.get方法并不返回组件，而是返回封装了组件所生成元素的Ext.dom.Element对象，该对象可实现组件所提供的对元素进行操作的方法中的一部分。如果需要返回组件的话，需要使用Ext.ComponentManager.get方法，该方法返回组件本身。现在通过实例看这两个方法的区别。