SenchaTouch2.0-DOM的访问及控制

sencha touch 之所以能够非常好地完成工作，是因为它可以实现对DOM的访问，并且提供了对DOM进行控制的方法。

get方法的使用

launch: function(){
var panel = Ext.create('Ext.Panel', {
id: 'myPanel',
html: '一个简单的示例面板'
});
Ext.Viewport.add(panel);
Ext.get('myPanel').addCls('colorRed');
}

Ext.get并不返回组件，返回封装了组件所生成元素的Ext.dom.Element对象，（该对象可实现组件所提供的对元素进行操作的方法中的一部分），返回组件使用 Ext.ComponentManager.get方法，返回组件本身。

Ext.ComponentManager.get

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('myPanel').add(subPanel);
}

Ext.fly方法

Ext.fly方法使用Ext.js 4中的flyweight技术，该技术在浏览器中为使用EXt.fly方法的元素节点开辟一块内存，下一次使用Ext.fly方法的元素节点将占据相同地址的内存，即覆盖前一次使用Ext.fly方法的元素节点，这些节点在浏览器中共享一块内存。

launch: function() {
var panel = Ext.create('Ext.Panel', {
id: 'myPanel',
html: '一个简单的示例面板'
});
var subPanel = Ext.create('Ext.Panel', {
id: 'subPanel',
html: '面板中的子面板'
});
Ext.Viewport.add(panel);
panel.add(subPanel);
var newPanel = Ext.get('myPanel');
Ext.fly('subPanel');
newPanel.addCls('colorRed');
}

修改代码： var newPanel = Ext.fly(‘myPanel’);

修改后子面板元素文字颜色变为红色，父面板未变色，由此可以看出newPanel指针位置指向了subPanel元素。

程序多次引用某个元素应该使用Ext.get()方法，如果该元素只定义使用一次，则使用Ext.fly()以节约内存资源。