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方法,该方法返回组件本身。现在通过实例看这两个方法的区别。