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。

Sencha Touch 之 Ext.fly方法的使用的更多相关文章

  1. Sencha Touch 之 Ext.ComponentManager.get方法使用

    HTML代码: <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  2. Sencha touch中Ext.List的使用及高度自适应

    最近在做 Sencha 的一个项目,需要用到 Ext.List 来列出所需商品及相关信息,平时我们使用 Ext.List 都是使用  fullscreen:true  来设置 List 全屏显示, 但 ...

  3. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  4. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  5. 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测（App Inspector）

    和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...

  6. 【翻译】Sencha Touch 2入门：创建一个实用的天气应用程序之三

    原文:Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 3) 作者:Lee BoonstraLee is a ...

  7. 俺的新书《Sencha Touch实战》终于出版了

    内容简介:Sencha框架是第一个基于HTML 5的移动也能给予框架,可以让Web应用看起来像网络应用.美丽的用户 界面 组件和丰富的数据管理,全部基于最新的HTML 5和CSS 3的Web标准,全部 ...

  8. SenCha Touch 与 EXTJS 安装Myeclipse 插件

    http://www.cnblogs.com/jirimutu01/default.html 关于SenchaEclipsePlugin插件的安装和使用 使用过eclipse开发java程序的人都知道 ...

  9. [Phonegap+Sencha Touch] 移动开发26 Android下的sencha touch程序，转屏时，Ext.Viewport不能触发orientationchange事件的解决的方法

    Sencha touch 2.4.2 已经解决问题了. 比方你为Ext.Viewport的orientationchange事件加入了一个监听方法: Ext.Viewport.on('orientat ...

随机推荐

  1. yum mysql

    linux下使用yum安装mysql   1.安装 查看有没有安装过:           yum list installed mysql*           rpm -qa | grep mys ...

  2. Javascript中undefined,NaN等特殊比较

    以下内容转自: http://blog.csdn.net/hongweigg/article/details/38090093 1.问题:在Javascript中,typeof(undefined) ...

  3. 关于ASP .Net Core 引用dll 一

    一:ASP.Net Core 引用dll文件,不可以直接引用,必须在NuGet中引用才行. 二:如果想引用自己的dll文件,则需要注册NeGet账号,获取到API Key 才行,还需要下载NuGet安 ...

  4. javascript中this,call,apply详解

    javascript是一门解释型的语言,与很多面向对象语言相比有着不同特性,所以不能用面向对象的原理来理解this这个关键字. 在JS中,要真正理解this倒底指向哪个对象,必须先了解JS的作用域和原 ...

  5. js 保留两位小数

    1. 最笨的办法....... function get() { var s = 22.127456 + ""; var str = s.substring(0,s.indexOf ...

  6. XML字符串转化json

    public static String XMLTOJSON(String XMLContent,String tag) {  XMLSerializer xmlSerializer = new XM ...

  7. 【转】commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar实现文件上传

    总共:一个upload.jsp,一个FileUploadServlet.java,两个文件:ImagesUploaded,ImagesUploadTemp, 一个web.xml,两个架包:common ...

  8. jsp中利用java代码换行

    从数据库中取出的10条商品数据分两行显示,每行5条. <% for(int i=0; i<latestProducts.size(); i++) { Product p = latestP ...

  9. Linux07--Shell程序设计03 通配符与正则表达式

    通配符 通配符可用于代替字符. 通常地,星号“*”匹配0个或以上的字符,问号“?”匹配1个字符. 使用情况: 1.文件和目录 在CP/M.DOS.Microsoft Windows和类Unix操作系统 ...

  10. [问题解决] 启动mongod 时，出现addr already in use错误

    错误: 启动mongod root@wangyuyu-Vostro-:/usr/bin# ./mongod 错误提示: Sat Aug :: [initandlisten] ERROR: listen ...