SenchaTouch2.0-DOM的访问及控制

来源：互联网发布：迪拜最奢华的酒店知乎编辑：程序博客网时间：2024/06/03 16:00

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()以节约内存资源。

0 0