zoukankan      html  css  js  c++  java
  • 【翻译】热门支持小提示:2013年12月

    原文地址:http://www.sencha.com/blog/top-support-tips-december-2013?mkt_tok=3RkMMJWWfF9wsRolu63MZKXonjHpfsX57uwtUae2i4kz2EFye%2BLIHETpodcMTcNnMa%2BTFAwTG5toziV8R7PCKM1338YQWhPj


    作者:Sencha Support Team


    Seth Lemmons:充分利用TaskRunner


    有时候,重用正在运行的可以启动和暂停的的任务非常有用。相当幸运,在Ext JS中实现可重用的任务相当容易。Ext.util.TaskManager 是一个单例模式(singleton)的类,它的start方法可以通过传递的配置自动创建任务。或者,也可以创建自己的任务实例。任务会保持一个内部运行的根据间隔时间自动增长的计数器,且可在每次调用start方法进行重置。可以为任务定义一个在任务停止(或取决于如何缓存进度的暂停)时调用的onStop函数。使用fireOnStart配置项可以用来判断任务在调用start方法或在第一次时间间隔过后run函数是否执行正确。

    这里有一个创建计时器并允许用户启动和暂停它的示例。任务的进度被缓存它的值属性指向的counter组件中。现在,每当调用stop方法就像暂停这个用例。

    可以在https://fiddle.sencha.com/#fiddle/1ca来查看它的行为。

    如果想阅读更多有关任务间隔(Taskk Intervals)的文档,可参阅http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.TaskRunner


    Mitchell Simoens:Sencha Touch中的事件委托

    你知道吗,即使没有在MVC应用程序中使用控制器,容器也可以监听子组件的事件?有两种方法可以实现这个:

    Ext.Viewport.add({
        layout    : {
            type      : 'card',
            animation : 'slide'
        },
        items     : [
            {
                html  : 'Card One',
                items : [
                    {
                        xtype : 'button',
                        ui    : 'forward',
                        text  : 'View Details'
                    }
                ]
            }
        ],
        listeners : {
            delegate : 'button[ui=forward]',
            tap      : function(button, e) {
                this.setActiveItem({
                    html : 'Details are here!'
                });
            }
        }
    });

    在上面的示例中,在容器中使用了卡片布局。第一张卡片中包含一个子按钮,预期的效果是通过子按钮的tap事件在顶层容器显示详细视图。不过,由于未来可能将按钮移动到工具栏上,所以不希望直接在这里监听按钮的事件。为了做成防护措施,在这里可以在顶层容器添加监听并采用委托事件来实现,而它的目标就是按钮的ui属性值forward。配置项delegate会使用到ComponentQuery的选择符,选择符可以是简单的,也可以时候复杂的,看你需要。但我的建议是尽量保持简单。


    这个示例的演示可以浏览https://fiddle.sencha.com/#fiddle/1f9。

    如果是使用Ext.define自定义的组件,可以使用control配置项,就像在控制器中一样,代码如下:

    Ext.define('MyContainer', {
        extend : 'Ext.Container',
        xtype  : 'mycontainer',
     
        config : {
            layout  : {
                type      : 'card',
                animation : 'slide'
            },
            items   : [
                {
                    html  : 'Card One',
                    items : [
                        {
                            xtype : 'button',
                            ui    : 'forward',
                            text  : 'View Details'
                        }
                    ]
                }
            ],
            control : {
                'button[ui=forward]' : {
                    tap : 'onButtonTap'
                }
            }
        },
     
        onButtonTap : function(button, e) {
            this.setActiveItem({
                html : 'Details are here!'
            });
        }
    });
     
    Ext.Viewport.add({
        xtype : 'mycontainer'
    });

    和第一个示例一样,在control配置项中,使用了按钮的ui属性值forward来切换详细视图。要注意的是,tap事件映射的onButtonTap方法是在顶层的MyContainer组件中定义的。当要实现将子组件的事件定义在容器这种方法,就可是有control配置项。不过,要记住尽可能使用简单的选择符。

    本示例的演示可以访问https://fiddle.sencha.com/#fiddle/1fa

    如果有一个锚链标记(<a>),且需要捕获tap事件并阻止它进入对应的链接,可以类似第一个示例,使用delegate配置项来实现,不过要告诉监听,这是元素监听,代码如下:

    Ext.Viewport.add({
        html      : '<div>You can capture tap event on this <a href="#" class="tappable">link</a> in your components</div>',
        listeners : {
            element  : 'element',
            delegate : 'div a.tappable',
            tap      : function(e, t) {
                e.stopEvent();
     
                Ext.Viewport.removeAll();
                Ext.Viewport.setHtml('You tapped it!');
            }
        }
    });

    可以使用element配置项来告诉监听现在监听的是基于组件元素的事件,且使用delegate配置项来为tap事件监听特定元素。在这里,delegate配置项使用了DOM选择符,选择符可以使用所需的任何选择符,但我建议尽可能的保持简单。要注意的是,在浏览器上,如Google Chrome,将不会停止事件,不过在移动设备上,它会正常工作。

    这个例子的演示可以访问 https://fiddle.sencha.com/#fiddle/1fb


    Greg Barry:在Sencha Cmd 中隐藏Gems

    Sencha Cmd严重依赖于一组已知的有关你的环境变量和应用程序的内部属性。这些属性包括软件路径、系统设置和Sencha软件版本。

    在命令行中,只要在项目根目录中输入以下命令就可以查看和使用这些信息:

    sencha diag show

    通过命令行或自定义ANT脚本都就可以查看所有这些属性。

    还可以很容易的查看到一些属性的设置位置。通常可以根据命名空间来确定属性的源,例如:

    • app. — 查看"app.json"和".sencha/app/sencha.cfg"
    • workspace. — 查看"workspace.json"和".sencha/workspace/sencha.cfg"
    • framework. — 在Ext JS或Sencha Touch的SDK中查看"cmd/sencha.cfg"
    • cmd. — 在Sencha Cmd安装目录中查看"sencha.cfg"

    想了解更多有关将这些属性继承到自定义脚本的信息,可参阅: http://docs.sencha.com/extjs/4.2.2/#!/guide/command_advanced

  • 相关阅读:
    使用vue-cookies操作cookie
    JavaScript如何友好的操作的cookie
    揭秘——TCP的三次握手和四次挥手
    python学习之【第八篇】:Python中的函数基础
    python学习之【第七篇】:Python中的集合及其所具有的方法
    python学习之【第六篇】:Python中的字典及其所具有的方法
    php判断是不是手机端访问
    php判断浏览器还是微信打开
    php无限极分类方法
    javascript/jquery获取url地址栏参数的方法
  • 原文地址:https://www.cnblogs.com/hainange/p/6334188.html
Copyright © 2011-2022 走看看