Popular support skills

Original article: Top Support Tips

Author:Sencha Support Team

The Sencha Support Team shared their popular tips for the Sencha framework in the monthly Sencha news. In this article, I will introduce some new skills and many important skills I have summarized earlier this year. If you like these techniques and a large number of technical articles related to the Sencha framework, subscribe to the monthly Sencha newsletter.

Greg Barry: Use Sencha Cmd named Maverick of Ruby 2.

As you know, Sencha Cmd has always been dependent on Ruby 1.9.3 or earlier, while Ruby 2.0 may cause errors. The odd thing is that the Ext JS topic that uses the Sass variable is always set to "null! Default ". The Sass version of Cmd uses the old version, and the new version makes some changes to some variables. Important changes to Ruby 2.0 are not compatible with the Sass version used by Cmd. All these factors cause compatibility issues, which is why old Ruby versions are always required.

However, Ruby 2.0 is installed by default in the released version of Mavericks. We made some essential adjustments so that Cmd can now work with Ruby 2.0. The new version of Cmd will be accompanied by an Sass patch to prevent previous problems. The patch can now be used in Cmd 4.0.1 beta.

Note:: For applications that need to be maintained, it is best not to upgrade to Mavericks until the GA version is released.

Seth Lemmons: Ext. util. Observable. capture () (Ext JS)

If you want to listen to the trigger of all the events of the Ext. util. Observable class, you can use the static method capture. For example, you can use the following code to listen to all the events in the 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 method capture calls the function that is passed to it as the second parameter. Parameters passed to the callback function include:
1. Name of the event to be triggered
2. Parameter array passed to the event when an event is triggered

The method capture not only allows you to go deep into how and when the Observable instance triggers the event, but also returns false in the callback method to prevent the event from being triggered. If a class has an event with a before prefix, this is the best practice to prevent event triggering. If not, you can use capture as a convenient tool. For more information about the Observable capture method, visit here.

Greg Barry: autoMaxminzeSencha Touch is no longer required)

Previously, you can call the autoMaxminze function class of Viewport to implement full screen Web View. This effectively hides the top or bottom Toolbar of the Web application. However, as the device changes, the configuration has fewer functions and functions, so that it has to block such changes. In fact, this configuration has been solved in Touch 2.3.0, especially when iOS7 is used. This time, we recommend that you remove autoMaximize from their applications.

Greg Barry: one storage Store) multiple times using Ext JS)

When using Ext JS to create an application, it is a habit to define storeid for the storage so that they can be shared among multiple components. Then, if grid A and grid B share A storage, the filtered data will be displayed on both grids when the storage is filtered. Is there any way to prevent all components from changing when the storage changes? Don't worry!

When defining storage, you can use "store. storealias" to define the storage alias "storealias ).

For example:

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

Now, you can bind different storage instances to the components to keep them independent:

store: {    type: 'mystore'}

For more information, read this article.

Mitchell Simoens: split line chart Ext JS)

Sencha Ext JS provides a rich array of charts with complete functions. It provides plug-ins for free and supports cross-browser work in IE 6 to the latest Chorme. A common problem is how to display discontinuous lines on a line chart. To implement Ext JS, you only need to use false in the data. If false is returned, the vertex is regarded as a non-data vertex without being drawn, and the vertex before and after the vertex is not connected. The following 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, two lines are displayed based on the values of foo and bar. Because the return value of false is calculated on July 15, May and July 15, August, the foo line is displayed in three segments. The bar line is different from the fool line. Only one line is displayed. Because the line bar returns false values on April 9 and April 9, the data points on April 9 and April 9 are not displayed.

To learn more