Latest Ext JS 7.8 is now available. Learn more

Top Support Tips: December 2013

December 11, 2013 164 Views
Show

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 : ‘

You can capture tap event on this link in your components

‘,
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

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More