Top Support Tips - By Sencha Blog

Source : http://www.sencha.com/blog

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