Ext JS 4 Beta 2 Preview: The Ext.Brew Package

One of the features we haven’t discussed much in Ext JS 4 is the new Ext.Brew package. Unique among JavaScript frameworks, the Ext.Brew package uses unique Sencha technology to brew the perfect cup of tea.

Using the power of the new data package, it’s easy to construct an app that generates a consistent and balanced cup of tea every time. To get started, we’ll start by defining a model that keeps the parts together.

notextile..Ext.onReady(function() {
Ext.regModel(‘Cups’, {
fields: [‘material’, ‘size’] });

Ext.regModel(‘Teas’, {
fields: [‘name’, ‘caffeine’, ‘brewtemp’] });

var cupStore = new Ext.data.Store({
model: ‘Cups’,
sorters: [‘size’],
data: [
{ material: ‘Ceramic’, size: ‘6oz’ },
{ material: ‘Ceramic’, size: ’12oz’ },
{ material: ‘Glass’, size: ‘8oz’ },
{ material: ‘Glass’, size: ’16oz’ }
] });

var teaStore = new Ext.data.Store({
model: ‘Teas’,
sorters: [‘name’],
data: [
{ name: ‘Sencha’, caffeine: 45, brewtemp: 175 },
{ name: ‘Earl Grey’, caffeine: 40, brewtemp: 210 },
{ name: ‘Oolong’, caffeine: 70, brewtemp: 176 },
{ name: ‘Herbal’, caffeine: 0, brewtemp: 210 }
] });
})

Now that we’ve got a model and a store for the tea, it’s time to brew. Unfortunately, in Beta 2 our brew package can only brew Sencha tea so attempts to brew anything else may result in scaling water ejecting from your laptop, so as always use beta software with caution.

To use Ext.Brew package, you must extend it from the base class and provide it the store in order for it to know the kind of tea for it to operate on. After you have the instance, you can then start the brew, pause it, and stop it. While the brew is active you can check the state and brewtemp properties so you can provide a nice user experience for your Ext JS app. The onReady event is called when the brew is done based on the variables in the model. Be careful when pausing or stopping a brew if the state is equal to ‘active’. We haven’t fully tested the functionality and may result in a weak brew.

notextile..Ext.define(‘MyApp.BrewMaster’, {
extend: ‘Ext.Brew’,

cups: cupStore,
teas: teaStore,

sugar: ‘medium’,
milk: ‘skim’,

initComponent: function() {
// run your brew management code here such as
// checking brewtemp before the brew starts

MyApp.BrewMaster.superclass.initComponent.apply(this, arguments);
}

onReady: function () {
if (this.brewtemp > 100) {
// the brew is finished, but it’s still too hot to enjoy
setTimeout(onReady, 500);
}
}

});

We hope with the new Ext.Brew, you can brew a perfect cup of tea every time. Here at Sencha headquarters we’ve been running a few apps built on Ext.Brew for a week now with a minimal number of first-degree burns!