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!
Hey guys any news when the Neptune theme will be available? I will definitely like to work with it.
good one -just noticed the date!
How do I purchase this? ;)
Ext.Brew is absolutely stunning!!!
Example would look even more impressive if it’d use this.callParent(); :-)
@Steffen I’d call it this.callGuinness() instead
Hahaha… Good one!!
Do you plan to bubble up events such as Brew level? I hate it when my cup is empty and would like to avoid this situation in a production environment. :o)
Just what we need; this’ll fit nicely along side my MugTree :)
Tea(‘Earl Grey’).hot!
Amazing!!! Can’t wait to put my mouth on it!! ;-)
Use my extension:
Ext.ux.BrewCupHolder
– help you keep you hands safe if the tea is too hot
Coming soon:
– Heating feature – keep your tea hot for hours.
Hope you would find it useful.
El
it’s interesting, what written on the cup (Chinese?)
It says Sen Cha (http://en.wikipedia.org/wiki/Sencha)
hahahaha Excellent!
Maybe I can adjust this amazing feature to have some tereré (http://en.wikipedia.org/wiki/Tereré) since here in Paraguay would be better a cold drink ;)
Cheers!
Hmm…I’m personally prefer a tea over coffee
Any idea about Sencha Touch integration…..ehehehehe ;)
Unfortunalety I think, the final Release of this amazing feature will be on April 1st 2012 :-(..
Hahahaha, it’s so good!!! any plans to implement this package in GXT ? :D
Awesome! I think I’ll inherit from .Brew and make a mocha !!!
Ext.define(‘MakeCoffee’, {
extend:’Ext.Brew’
});
var c = new MakeCoffee({milk:’half-and-half’});
c.make();
me.drink();
me.happy();
Syntax Error! me.happy() on Line 7: undefined method for Object ‘me’…
so coooooooooooooooooool….
You know, I am so going to be trying to brew beer with this bad boy,
var TeaStore = {…} // hops goes here
var MilkStore ={…} // barley here!
418 I’m a teapot
@Andrea — Sencha Touch integration, now that’s a good idea!
@Aditya – Do you know when we will have Neptune theme?
Thank You !
I’m not a big fan of this new Brew class… I keep burning my fingers when I Touch the Sencha tea ;)
PS. this.callParent(arguments); is shorter :D
@saki, leave out the ‘milk’ mixin and you’ll have your first MakeCoffee client
At first I thought this was going to be a module for Brew phones, and I thought, “well, that was nice of them, I guess.”
i love it
Very good, updated
I’m getting a 419 I’m a coffeepot error when I try to use this