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