Top Support Tips

The Sencha Support team shares their top tips for using Sencha frameworks in the Sencha newsletter each month. In this article, we’ll give you a few new tips and a round-up of the top tips from earlier this year. If you’d like to get these tips and lots of technical articles on using Sencha frameworks, subscribe to the monthly Sencha newsletter.

Mavericks took Ruby 2 to Town (Sencha Cmd)

by Greg Barry

As you may or may not know, Sencha Cmd has always relied on Ruby 1.9.3 and below. There were some changes in Ruby 2.0 that created a few issues. For the morbidly curious, Ext JS themes use Sass variables which are set to “null !default”. Our “Cmd version” of Sass is an older version because newer versions introduced changes in the behavior of such variables. Ruby 2.0 introduced its own breaking change that was incompatible with the version of Sass included in Cmd. All of these things caused compatibility problems, which is why we required the older version of Ruby.

However, with the release of Mavericks came a default installation of Ruby 2.0. We made some quick adjustments, and we have a Cmd build that now works with Ruby 2.0. This new version of Cmd is shipped with a patched version of Sass that prevents the issues we ran into previously. This fix is available now in Cmd 4.0.1 beta.

Ext.util.Observable.capture() (Ext JS)

by Seth Lemmons

If you have ever wanted to see all of the events fired by a class that uses Ext.util.Observable, you can use the static capture method. You can do something like the following to see all events fired by a grid:

var grid = Ext.widget(‘gridpanel’, {
renderTo: document.body,
title: ‘Capture Example’,
heigh: 300,
width: 500,
store: {
fields: [‘foo’],
data: [{
foo: ‘bar’
}] },
columns: [{
text: ‘Foo’,
dataIndex: ‘foo’,
flex: 1
}] });

Ext.util.Observable.capture(grid, function (eventName, args) {
// console.log() will not work on all browsers – modify accordingly
console.log(eventName); // log the event’s name as it’s fired
});

The capture method calls the function passed as the second param. Passed as params to this callback function are 1) the name of the event fired and 2) an array of the arguments passed from the firing of the event.

Not only can the capture method give you additional insights into how and when an observable instance is firing events, the callback method can also return false in order to prevent the firing of the event. If a class has a -before event it is best practice to use that to prevent the firing of an event, but if it does not, the capture method can be a handy utility method. You can read more about Observable’s capture method here.

AutoMaximize No More! (Sencha Touch)

by Greg Barry

In the past, we were able to emulate a full screen Web View with a setting called autoMaximize on the Viewport utility class. This effectively hid the the top and bottom bars in a web application. However, the helpfulness and functionality of this configuration became less and less useful as devices changed to prevent this sort of workaround. In fact, this configuration has gotten to the point of creating issues in Touch 2.3.0, especially when using iOS7. At this time, it is recommended that users remove the autoMaximize setting from their applications.

One Store to Rule Them All (Ext JS)

by Greg Barry

When building an app with Ext JS, conventionally, you give your store a storeId, which can then be shared via multiple components. However, if Grid A and Grid B share a store, and you filter the store, both grids will now present filtered data. What if you don’t want all of your components to be modified when the store changes? Have no fear!

When you define the store, you can give it an alias of ‘store.storealias’ (where storealias is your chosen alias name).

For example:

Ext.define(‘MyApp.store.MyStore’, {
extend: ‘Ext.data.Store’,
storeId: ‘MyStore’,
alias: ‘store.mystore’,
fields: [‘foo’, ‘bar’] });

Now, when you attach your store to your component, you’re actually attaching a new instance of the store and your components can remain separate.

store: {
type: ‘mystore’
}

To learn more, read the docs.

Segmenting a Line Chart (Ext JS)

by Mitchell Simoens

Sencha Ext JS offers a rich and full-featured charting package that’s plugin free and works cross-browser from IE6 to the newest Chrome version. A common question is how to display a line chart but not have a continuous line. Ext JS makes this very simple to accomplish by using false within your data. If you return false, this will be treated as a non-data point and will not draw the marker or the lines connecting the data points before and after the false data point. Here is an example:

var store = Ext.create(‘Ext.data.Store’, {
fields : [‘month’, ‘foo’, ‘bar’],
data : [
{ month : ‘January’, foo : 7, bar : false },
{ month : ‘February’, foo : 8, bar : 3 },
{ month : ‘March’, foo : 8, bar : 2 },
{ month : ‘April’, foo : 7, bar : 1 },
{ month : ‘May’, foo : false, bar : 1 },
{ month : ‘June’, foo : 5, bar : 1 },
{ month : ‘July’, foo : 5, bar : 1 },
{ month : ‘August’, foo : false, bar : 1 },
{ month : ‘September’, foo : 7, bar : 1 },
{ month : ‘October’, foo : 8, bar : 2 },
{ month : ‘November’, foo : 8, bar : 3 },
{ month : ‘December’, foo : 7, bar : false }
] });

Ext.create(‘Ext.chart.Chart’, {
renderTo : Ext.getBody(),
width : 500,
height : 300,
animate : true,
store : store,
axes : [
{
type : ‘Numeric’,
position : ‘left’,
fields : [‘foo’, ‘bar’],
title : ‘Sample Values’,
minimum : 0
},
{
type : ‘Category’,
position : ‘bottom’,
fields : [‘month’],
title : ‘Month’
}
],
series : [
{
type : ‘line’,
axis : ‘left’,
xField : ‘month’,
yField : ‘foo’
},
{
type : ‘line’,
axis : ‘left’,
xField : ‘month’,
yField : ‘bar’
}
] });

In this example, we have two line series to show the values of foo and bar. The foo line displays as 3 separate lines because of the two false values for May and August. The bar line displays as a single line, but unlike the foo line series, the bar series does not display the January and December data points due to the false values.

You can read more about Field Triggers here: https://fiddle.sencha.com/#fiddle/mu

Building Responsive Apps Using Sencha Touch Button Sensitivity (Sencha Touch)

by Greg Barry

As device resolution gets bigger and better, some users may experience issues with Sencha Touch button sensitivity. Not to worry, we introduced a new event recognizer configuration item called moveDistance in Sencha Touch 2.2.0. MoveDistance determines the maximum distance in pixels a touchstart event can travel and still be considered a tap. On larger devices, the default 8px may be a bit too low, so some taps may be disregarded. To adjust this sensitivity, simply add the following to your application block.

Ext.application({
name : ‘MyApp’,
eventPublishers : {
touchGesture : {
recognizers : {
tap : {
xclass : ‘Ext.event.recognizer.Tap’,
moveDistance : 20 //This was adjusted from the default 8
}
}
}
}
});

You can read more about the moveDistance configuration here.

Using Concatenation – Quicker File Transmission (Sencha Cmd)

By Seth Lemmons

Most of the time a developer will use Sencha Cmd to generate and then build Ext JS and Sencha Touch applications where the output JavaScript file is an all-classes.js file linked from the Cmd built index page. But, what if you want to concatenate a set of files that you choose and have them compressed for quicker file transmission?

For simple file creation using select files (not an application that requires Cmd to sort out the dependencies of each interconnected class), you can use the fs and concat commands.

For example, to concatenate the JavaScript file A and B, you could use the following command:

sencha fs concat -to=concatenated.js -from=file-a.js,/file-b.js

Or, if you want to minify the output, you could use:

sencha fs concat -to=concatenated.js -from=file-a.js,file-b.js and minify -yui -from=concatenated.js -to=minified.js

*-yui or -closure could be used for the compression option

You can read more about this function in our docs:
http://docs.sencha.com/extjs/4.2.1/#!/guide/command_advanced

Battling Compression (Sencha Cmd and Ext JS)

by Greg Barry

There may be a situation in which an Ext JS user would like to create an uncompressed production build. Luckily, this is quite simple to do.

Just open your production.properties configuration, located here:

.sencha/app/production.properties

Once there, you can modify several compression settings.

To disable YUI compression change:

build.compression.yui=1

To disable CSS compression change:

build.css.compress=true

You can read more about customizing Sencha Cmd options here:
http://docs.sencha.com/cmd/3.1.2/#!/guide/command_advanced