Top Support Tips: December 2013

Making the most of TaskRunner

By Seth Lemmons

Sometimes, it’s helpful to have a reusable running task that you can start and pause at will. Fortunately, setting a reusable task with Ext JS is quite easy. Ext.util.TaskManager is a singleton class, whose start() method can auto-create a task using a passed config. Or, you can create your own task instance. The task will keep an internal running counter that increments with each interval and resets on each start(). You can set an onStop function for the task to be called whenever the task is stopped (or paused depending on how you cache its progress). Using the fireOnStart config will let you dictate whether the task’s run function is executed right when you call start() or after the first interval passes.

Here’s an example that creates a timer and allows the user to start it and pause it. The progress from the task is cached in the ‘counter’ component in its value property. Now each stop() acts more like a ‘pause’ in this use case.

See it in action at https://fiddle.sencha.com/#fiddle/1ca

You can read more about Task Intervals in the docs:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.util.TaskRunner

Event Delegation in Sencha Touch

By Mitchell Simoens

Did you know a container can listen to events on a descendant component even if you are not using controllers in a MVC application? There are two ways to do it:
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!’
});
}
}
});

In this example, we added a container that uses card layout. The first card has a child button that we want to use to show a detail view on the top container using the tap event on the button; but we don’t want to place the listen directly on the button as we may want to move the button to a toolbar in the future. In order to protect ourselves, we added a listener to the top container and use the delegate event config to target a button with the ui of ‘forward’. The delegate config uses a ComponentQuery selector and can be as simple or complicated as you need it to be, but I would recommend keeping it as simple as possible for performance.

See this in action at https://fiddle.sencha.com/#fiddle/1f9

If you are defining your own component using Ext.define, you can use the control config exactly like you can in a controller:
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’
});

Just like the first example, we use the control config to target the button with the ui of ‘forward’ to switch to a detail view. Notice that the onButtonTap function we set on the tap event is mapped to the onButtonTap method at the root level of the MyContainer component. I use the control config in this way when I want to normalize an event from a descendant component on to a container. Remember: try and keep your selectors as simple as you can for performance.

See this in action at https://fiddle.sencha.com/#fiddle/1fa

What if you have an anchor tag (<a>) and you need to capture the tapping on it to stop the browser from trying to follow the link? Much like the first example, we can use the delegate event config, but we also have to tell the listener that it’s an element listener:
Ext.Viewport.add({
html : ‘

‘,
listeners : {
element : ‘element’,
delegate : ‘div a.tappable’,
tap : function(e, t) {
e.stopEvent();

Ext.Viewport.removeAll();
Ext.Viewport.setHtml(‘You tapped it!’);
}
}
});

We use the element event config to tell the listener to listen for this event on the component’s element and use the delegate to listen for the tap event on a particular element. The delegate config here is using a DOM selector. You can be as advanced as you need, but I’d recommend keeping it as simple as possible for performance. One caveat: if you are testing in a browser like Google Chrome, you will not be able to stop the event, but it will work as expected on a mobile device.

See this in action at https://fiddle.sencha.com/#fiddle/1fb

Hidden Gems in Sencha Cmd

By Greg Barry

Sencha Cmd relies heavily on a set of internal properties that are known about your environment and application. These properties include environmental software paths, system settings and Sencha software versions.

You can also view and use these bits of information. Just issue the following statement in your command line from your project root:

sencha diag show

All of the shown properties are available to you via the command line or in a custom ANT script.

It’s also an easy way to see where some properties are being set. You can generally determine the source of the property based on the namespace. For instance:

• app. — See “app.json” and “.sencha/app/sencha.cfg“.
• workspace. — See “workspace.json” and “.sencha/workspace/sencha.cfg“.
• framework. — See “cmd/sencha.cfg” in the Ext JS or Sencha Touch SDK.
• cmd. — See “sencha.cfg” in the Sencha Cmd install folder.

You can read more about integrating these properties into your custom scripts in the docs:
http://docs.sencha.com/extjs/4.2.2/#!/guide/command_advanced