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. c# 自定义位数生成激活码

    Random random = new Random(~unchecked((int)DateTime.Now.Ticks));private string CreateAndCheckCode(Ra ...

  2. 03JS高级关于为空的变量判断

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 疯狂Java讲义 第一章控制台五子棋（代码分析）

    package com.test; public class Chessboard { //定义二维数组作为棋盘 private String[][] board; //定义棋盘大小 public s ...

  4. Facebook发布C++ HTTP框架Proxygen

    Facebook 宣布发布C++ HTTP 框架 Proxygen,其中包括了一个 HTTP server.Proxygen 是 oxygen 的谐音,支持 SPDY/3 和 SPDY/3.1,未来还 ...

  5. ie兼容---haslayout

    要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念.大多IE下的显示错误,就是源于 haslayout. 什么是 haslayout ? ...

  6. 前端开发面试题收集 JS

    前端开发面试题收集-JS篇 收集经典的前端开发面试题 setTimeout的时间定义为0有什么用? javascript引擎是单线程处理任务的,它把任务放在队列中,不会同步执行,必须在完成一个任务后才 ...

  7. linux 机器出现or type control d to continue问题的处理办法

    当出现这个界面时,主要是因为磁盘问题 直接输入root密码进入修复模式 在命令行下执行fsck命令 进行相关挂载目录或是磁盘的修改 看下 /etc/fatab下是否有 自己加的开机自动挂载的目录 ,看 ...

  8. 迁移到MSYS2 与 Qt 工具链注意的几个事情（注意链接顺序，并且人造mingw工具链所没有的局部midl.exe命令）

    Microsoft Visual Studio 2015社区版提供了强大的开发体验,且 Qt 提供了预编译版本.然而,由于客户提出兼容Windows XP ~ Windows 8.1 这样宽泛的环境要 ...

  9. 跨平台的C++应用和UI开发库 QT

    跨平台的C++应用和UI开发库 QT 运行环境: 授权方式:BSD 软件大小:M 下载量:3912 更新日期:2012-04-05 来源地址: 联系作者:Linux     Qt是诺基亚开发的一个跨平 ...

  10. oracle check if the display variable is set