Sencha Touch 之 Ext.fly方法的使用
Ext.fly方法是Ext.js 4中的flyweight技术，该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存，下一次使用Ext.fly方法的元素节点将占据同一块内存，即覆盖前一次的元素节点。可以理解为开辟一块共享内存，供元素节点使用。示例：
HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>一个简单的示例面板</title>
<link rel="stylesheet" type="text/css" href="../../css/sencha-touch.css">
<script src="../../sencha-touch.js"></script>
<script src="app-all.js"></script>
</head>
<style type="text/css">
.colorRed {
color:blue;
}
</style>
<body>
<div>Hello, World</div>
</body>
</html>
JS代码：
Ext.application({
name : 'myApp',
icon : '../../images/icon.png',
glossOnIcon : false,
phoneStartupScreen : '../../images/phone_startup.png',
tabletStartupScreen : '../../images/tablet_startup.png',
launch : function() {
//panel以div元素的形式显示在页面中
var panel = Ext.create('Ext.Panel', {
//或var panel = Ext.create('Ext.lib.Panel', {
fullscreen : true, //指定面板尺寸是否自动扩展为浏览器窗口的尺寸
id : 'myPanel', //id将作为面板元素生成的div层的id，切记唯一性
html : '一个简单的示例面板' //生成html代码，这段代码将被插入div层中
});
/*
还可以
var panel = new Ext.Panel({
});
或
var panel = new Ext.lib.Panel({
});
*/
var subPanel = new Ext.Panel({
id: 'subPanel',
html: 'panel面板中的子面板'
});
Ext.Viewport.add(panel); //在这里它可以省去
//Viewport和panel类似，也是以div形式显示在页面中，但它在launch之前就被创建，且可以向它里面添加其他组件
panel.add(subPanel);
var newPanel = Ext.get('myPanel');
//var newPanel = Ext.fly('myPanel');
//Ext.fly('subPanel');
newPanel.addCls('colorRed');
}
});
最终结果会发现，父面板和子面板的字体颜色都变为蓝色。下面使用fly方法：
Ext.application({
name : 'myApp',
icon : '../../images/icon.png',
glossOnIcon : false,
phoneStartupScreen : '../../images/phone_startup.png',
tabletStartupScreen : '../../images/tablet_startup.png',
launch : function() {
//panel以div元素的形式显示在页面中
var panel = Ext.create('Ext.Panel', {
//或var panel = Ext.create('Ext.lib.Panel', {
fullscreen : true, //指定面板尺寸是否自动扩展为浏览器窗口的尺寸
id : 'myPanel', //id将作为面板元素生成的div层的id，切记唯一性
html : '一个简单的示例面板' //生成html代码，这段代码将被插入div层中
});
/*
还可以
var panel = new Ext.Panel({
});
或
var panel = new Ext.lib.Panel({
});
*/
var subPanel = new Ext.Panel({
id: 'subPanel',
html: 'panel面板中的子面板'
});
Ext.Viewport.add(panel); //在这里它可以省去
//Viewport和panel类似，也是以div形式显示在页面中，但它在launch之前就被创建，且可以向它里面添加其他组件
panel.add(subPanel);
//var newPanel = Ext.get('myPanel');
var newPanel = Ext.fly('myPanel');
Ext.fly('subPanel');
newPanel.addCls('colorRed');
}
});
最终结果只有子面板的字体颜色变为蓝色。
虽然fly方法在一定程度上可以提高应用程序的性能，但是我们应该为那些在代码中只引用一次、之后不再引用的元素使用Ext.fly方法。否则的话应该使用Ext.get方法，以避免一些意想不到的bug。