我们还没有介绍过ExtJS 4众多特性之一的新Ext.Brew包。这是独一无二的Javascript框架,Ext.Brew是采用Sencha独特技术酿造的的一杯完美的茶。
使用新数据包的强大功能,可在任何时候构建一个生成一致均衡的茶的应用程序。开始之前,首先定义一个部件之间用于交互的模型。
1 |
Ext
.
onReady
(
function
(
)
{
|
2 |
Ext
.
regModel
(
'
Cups
'
,
{
|
3 |
fields
:
[
'
material
'
,
'
size
'
]
|
4 |
}
)
;
|
5 |
|
6 |
Ext
.
regModel
(
'
Teas
'
,
{
|
7 |
fields
:
[
'
name
'
,
'
caffeine
'
,
'
brewtemp
'
]
|
8 |
}
)
;
|
9 |
|
10 |
var
cupStore
=
new
Ext
.
data
.
Store
(
{
|
11 |
model
:
'
Cups
'
,
|
12 |
sorters
:
[
'
size
'
]
,
|
13 |
data
:
[
|
14 |
{
material
:
'
Ceramic
'
,
size
:
'
6oz
'
}
,
|
15 |
{
material
:
'
Ceramic
'
,
size
:
'
12oz
'
}
,
|
16 |
{
material
:
'
Glass
'
,
size
:
'
8oz
'
}
,
|
17 |
{
material
:
'
Glass
'
,
size
:
'
16oz
'
}
|
18 |
]
|
19 |
}
)
;
|
20 |
|
21 |
var
teaStore
=
new
Ext
.
data
.
Store
(
{
|
22 |
model
:
'
Teas
'
,
|
23 |
sorters
:
[
'
name
'
]
,
|
24 |
data
:
[
|
25 |
{
name
:
'
Sencha
'
,
caffeine
:
45
,
brewtemp
:
175
}
,
|
26 |
{
name
:
'
Earl
Grey
'
,
caffeine
:
40
,
brewtemp
:
210
}
,
|
27 |
{
name
:
'
Oolong
'
,
caffeine
:
70
,
brewtemp
:
176
}
,
|
28 |
{
name
:
'
Herbal
'
,
caffeine
:
0
,
brewtemp
:
210
}
|
29 |
]
|
30 |
}
)
;
|
31 |
}
)
;
|
现在我们已经有了一个茶的模型和Store,可以泡茶了。很不幸,在Beta 2版新的Brew包只能泡Sencha茶,如果想尝试泡其它的茶,可能会导致滚烫的水从笔记本中弹出,因此,请尽量谨慎使用测试版软件。
要使用Ext.Brew包,你必须从基类扩展它并提供Store,以便让它知道茶的类型和如何操作。在实例中,可执行开始、暂停和停止操作。当Brew处于活动状态,可检查状态和临时属性,以便为用户提供一个有很好的用户体验的Extjs应用程序。onready事件将根据模型变量在brew完成时被调用。不过要小心的是,在state值为“active”时,不要暂停或停止brew,这功能还没进行完整的测试,可能会导致弱的brew。
1 |
Ext
.
define
(
'
MyApp
.
BrewMaster
'
,
{
|
2 |
extend
:
'
Ext
.
Brew
'
,
|
3 |
|
4 |
cups
:
cupStore
,
|
5 |
teas
:
teaStore
,
|
6 |
|
7 |
sugar
:
'
medium
'
,
|
8 |
milk
:
'
skim
'
,
|
9 |
|
10 |
initComponent
:
function
(
)
{
|
11 |
//
run
your
brew
management
code
here
such
as
|
12 |
//
checking
brewtemp
before
the
brew
starts
|
13 |
|
14 |
MyApp
.
BrewMaster
.
superclass
.
initComponent
.
apply
(
this
,
arguments
)
;
|
15 |
}
|
16 |
|
17 |
onReady
:
function
(
)
{
|
18 |
if
(
this
.
brewtemp
>
100
)
{
|
19 |
//
the
brew
is
finished,
but
it's
still
too
hot
to
enjoy
|
20 |
setTimeout
(
onReady
,
500
)
;
|
21 |
}
|
22 |
}
|
23 |
|
24 |
}
)
;
|
希望通过新的Ext.Brew,可以让你每次都能泡一杯完美的茶。在Sencha总部,在一个星期内,已经有一些使用Ext.Brew的应用程序在允许,不过都有轻微的一级烫伤。
作者:Aditya Bansod
Aditya是Sencha的产品管理高级总监,负责产品的规划和Sencha产品线的战略。在来Sencha之前,Aditya在Adobe和微软任职各种高级产品管理的角色,侧重于发展商、移动媒体和消费电子领域。
原文:http://www.sencha.com/blog/ext-js-4-beta-2-preview-the-ext-brew-package/
分享到:
相关推荐
1、Ext.TabPanel简单使用 代码:
extjs多选下拉框,Ext.ux.form.LovCombo,extjs 以修复多选下拉框火狐下取不到值的问题,火狐下div不显示背景色的问题
extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径...支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail.com
ExtJs选中var editor = new Ext.ux.grid.RowEditor详解.txt
注意:Extjs4.XX的只能用,Sencha Cmd 4.0.5 (Windows) 来打包,不然运行的时候会报错 需要JDK1.6 或 JDK1.7,测试用1.8也能正常运行,注意这点即可。 1.2Sencha安装 路径:D:\Sencha,安装后目录如下图: 1.3Ruby...
NULL 博文链接:https://sonckchi.iteye.com/blog/1266437
ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例
2、Ext.ux.grid.feature.Tileview 3、Ext.ux.upload.Button 4、Ext.ux.toggleslide.ToggleSlide 5、Ext.ux.container.ButtonSegment 6、Ext.ux.grid.plugin.RowEditing 7、Ext.ux.grid.plugin.DragSelector 8、Ext....
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 }); 效果图: 代码如下: Ext.onReady(function() { //定义 JSON(配置对象) var config = { ...
Extjs4 comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用。来源于网络,稍作修改。
Extjs 4.x的插件和扩展Ext.ux.form.field.CodeMirror 可与ExtJS 4.0.7、4.1.x和4.2.x以及CodeMirror 3.20一起使用。 执照:麻省理工学院演示:论坛:Ext.ux.form.field.UploadFileField 执照:麻省理工学院演示:...
基于extjs的.NET3.5控件Coolite 1.0.0.34580 (Preview预览版), *************************************************** * Version 1.0.0 升级日志 * *************************************************** 1. ...
1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy...
EXTjs的上传组件
1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy...
茉莉花节点jsdom-extjs-testing-tool 使用 jasmine-node 和 jsdom 的功能性前端 Ext.JS 测试自动化工具如果您已经安装了节点包模块( ),安装将为您获取所需的库。Ext.JS 设置使用 Ext.JS 包并遵循 Sencha cmd 企业...
Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...
一、ExtJs中的Ajax:Ext.Ajax.request 23 二、元素对象Ajax式更新:Ext.Updater,[已弃用] 29 第四章 Ext.XTemplate 模板 31 一、使用标签tpl和操作符for 33 二、在子模板的范围内访问父元素对象 34 三、数组元素索引...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...