zoukankan      html  css  js  c++  java
  • 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。

  • 相关阅读:
    微信 token ticket jsapi_ticket access_token 获取 getAccessToken get_jsapi_ticket方法
    PHP 日志 记录 函数 支持 数组 对象 新浪 sae 环境 去掉 空格 换行 格式化 输出 数组转字符串
    原生 原始 PHP连接MySQL 代码 参考mysqli pdo
    PHP 数字金额转换成中文大写金额的函数 数字转中文
    使用PHPMailer发送带附件并支持HTML内容的邮件
    设置输出编码格式 header 重定向 执行时间 set_time_limit 错误 报告 级别 error_reporting
    html5 bootstrap pannel table 协议 公告 声明 文书 模板
    指向指针的指针
    二级指针
    c语言:当指针成为参数后
  • 原文地址:https://www.cnblogs.com/hgfrzh/p/3362654.html
Copyright © 2011-2022 走看看