SenchaTouch对Dom的访问及控制

SenchaTouch对Dom的访问及控制
SenchaTouch之所以能够非常好的完成工作，是因为它可以实现对DOM的访问，并且提供了对DOM进行控制的方法。在这些方法中，Ext.get方法是最长用的
1、Ext.get方法的使用
Ext.get方法如下代码
Ext.get('myPanel')

Ext.application({
	name:'MyApp',
		cion:'imagen/icon.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()方法，改方法返回组件本身。
2、Ext.ComponentManager.get()方法的使用
使用Ext.ComponentManager.get()方法获取id选项值为myPanel的面板组件，然后使用该面板组件的add方法将第二个面板添加成为子面板

Ext.application({
	name:'MyApp',
		cion:'imagen/icon.png',
		launch:function(){
		var panel = Ext.create('Ext.Panel',{
		id:'myPanel',
			html:'一个简单的示例面板'
		});


		var subpanel = Ext.create('Ext.Panel',{
		id:'subpanel',
			html:'面板中的子面板'
		});




		Ext.Viewport.add(panel);
		Ext.ComponentManager.get('panel').add(subpanel);
	}
});

3、使用id进行查询
使用id查询是最直接快捷的查询方式，如果有可能，要尽量使用该方式

eg:查询一个id="buttonLogin"的按钮

Ext.ComponentQuery.query("#buttonLogin");

提示：Ext.ComponentQuery是一个单例模式的实例，因而需要使用该对象的query方法来查询
查询结果会返回一个数组，数组中第一个元素就是要找的的组件
4、使用xtype查询
在没有设置id的时候，主要的查询方式就是通过xtype进行查询，在有同类型的组件时还需要配合组件的属性进行查询
要使用xtype查询，可以直接使用xtype作为查询值，也可以学DOM的属性一样，使用前缀“.”，这个可以根据个人喜好选择，但最好是同一种方式
eg:查询一个按钮
语法：{成员函数}

Ext.ComponentQuery.query("button");
Ext.ComponentQuery.query(".button");

5、使用属性查询
从xtype查询可以了解到，xtype查询会把所有同类的组件都查询出来，但通常情况下我们需要的只是某个组件，这时候就需要附加一些组件的属性来进行查询了
eg:在保存按钮没有设置id的时候，可以通过以下属性查询方式来查询按钮
语法：[属性=属性值]

Ext.ComponentQuery.query("button[text=登录]")；

6、使用成员函数进行查询
有时候，需要查询处于某些状态的组件，例如，在表单中被禁用的组件。这时候，就可以通过使用组件的成员函数来查询符合要求的组件了
eg:查询表单面板中禁用的按钮

语法：{成员函数}

Ext.ComponentQuery.query("{isDisabled}");

因为组件被禁用时，调用isDisabled会返回true值，因而这就是符合条件的组件。如果要查询特定类型的组件，可以在前面加上xtype来进行复合查询，这样速度也快
7、直接使用id查询组件
语法：Ext.getCmp()方法
源码：getCmp(id){
return Ext.ComponentMgr.get(id);
}
使用getCmp方法很简单，把id作为参数传递给方法就行了。要注意的是千万别加上“#”符号作为前缀。
eg:获取登录按钮

Ext.getCmp("buttonLogin");

二、组件中的查询
1、Ext.Component的up方法
Ext.Component的up方法的作用如DOM树一样，根据组件树往上查找当前组件的父组件。如果想查找表单面板中的某个字段，就可以使用该方法先找到父组件表单面板，再从表单面板中使用down方法往下找。
up方法是在Ext.Component中定义的，也就是说，Ext.Component的子类都会有该方法。因而，该方法可以在很多组件内使用
要使用该方法很简单，如果是返回组件的直接父组件，可以不加任何参数
eg:获取登录按钮的父组件

Ext.getCmp("buttonLogin").up();

输出结果:在展开底部的“——proto_:Object”才可以看到“$className:"Ext.Toolbar"”,也就是说，该对象是Ext.Toolbar的实例，正是按钮的所在容器
如果要找按钮顶层的表单面板，可以输入一下语句

Ext.getCmp("buttonLogin").up("formpanel");

up方法的参数就是选择符，在这里使用了xtype来查询组件
2、Ext.Component的getParent方法
如果组件有父组件，可以使用getParent方法直接返回它的父组件。这个用来返回子组件的直接父组件比使用up方法来的简单
3、Ext.Container的down方法
dowm方法只能在容器类中使用，因为一般组件在理论上没有子组件的。而down方法是用来查找子组件用的，down方法返回的是符合条件的第一个组件，而且只能在容器类及其子类中使用
4、Ext.Container的query方法
实际上down方法也是使用query方法来查找组件的，只不过down方法返回的是第一个符合条件的组件，而query方法返回的是由组件组成的数组。
5、Ext.Container的child方法
方法child是用来返回容器下直接子组件的第一个子组件
eg:实例面板中，如果想使用child返回登录按钮，虽然登录按钮也是第一个符合条件的子组件，但它不是表单面板的第一个直接子组件

Ext.getCmp("myform").child("button");

返回结果是null，也就是找不到组件
Ext.getCmp("myform").child("toolbar").child("button");
就可以看到已经找到符合条件的登录按钮了，这是因为工具栏是表单面板的第一个直接的类型为工具栏的子组件，而登录按钮是工具栏的第一个直接类型为按钮的子组件
之所以会这样，是因为chlid在查询时使用了选择符“>”，源码
child:function(select){
return this.query('>' + select)[0] || null;
}
从代码中可以看到，查询会在传递参数的选择符前加上“>”，这样就限制了查询的子组件必须是父组件的直接子组件