【翻译】热门支持小提示：2013年12月
最后更新于：2022-04-01 07:23:19
原文地址：[http://www.sencha.com/blog/top-support-tips-december-2013?mkt_tok=3RkMMJWWfF9wsRolu63MZKXonjHpfsX57uwtUae2i4kz2EFye%2BLIHETpodcMTcNnMa%2BTFAwTG5toziV8R7PCKM1338YQWhPj](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](https://fiddle.sencha.com/#fiddle/1ca)来查看它的行为。
如果想阅读更多有关任务间隔（Taskk Intervals）的文档，可参阅[http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.TaskRunner](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](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](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](http://docs.sencha.com/extjs/4.2.2/#!/guide/command_advanced)