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. 用ul、li做横向导航

    /* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...

  2. log4net简单用法

    一.NuGet在Server,mvc中添加Common.Logging和common.Logging.Log4Net如下图 二.在Server层创建logger类 <?xml version=& ...

  3. oracle中的B-TREE索引

    在字段值情况不同的条件下测试B-TREE索引效率 清空共享池和数据缓冲区alter system flush shared_pool;alter system flush buffer_cache; ...

  4. Spring事务讲解示例

    Spring 事务Transaction1.事务的属性1.1 事务隔离IsolationLevel1.2 事务传播PropagationBehavior1.3 事务超时Timeout1.4 只读状态R ...

  5. 在ASP.NET MVC自定义错误页面

    异常处理跳转页面 第一步,在项目的Web.config文件中找到节点<system.web> 在此节点下添加配置(Error为定义的控制器也可以多添加些error标签用于区分不同的错误) ...

  6. 使用Open Live Writer 的代码高亮插件体验

    由于windows live writer 2012 已经停止服务,转而推出开源项目Open Live Writer .虽然Open Live Writer 也没怎么更新,官网更是一个插件都没有放出来 ...

  7. [string]Reverse Words in a String

    Given an input string, reverse the string word by word. For example,Given s = "the sky is blue& ...

  8. BF算法（朴素的模式匹配算法）

    #include <stdio.h> #include <stdlib.h> int Index_BF(char S[],char T[])//s为目标串(长串),t为模式串( ...

  9. python基础：名称空间与作用域

    Python的变量定义后都有自己的作用域,每个作用域内都有名字空间.名称空间就是变量名称与对象的关联关系.Python中使用变量名引用对象,需要使用该变量时,就在命名空间中进行搜索,获取对应的对象.从 ...

  10. java如何防止反编译

    综述(写在前面的废话) Java从诞生以来,其基因就是开放精神,也正因此,其可以得到广泛爱好者的支持和奉献,最终很快发展壮大,以至于有今天之风光!但随着java的应用领域越来越广,特别是一些功能要发布 ...