`
yesjavame
  • 浏览: 689457 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

ExtJS 4 Beta 2预览:Ext.Brew包

阅读更多

我们还没有介绍过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/

分享到:
评论

相关推荐

    ExtJS-3.4.0系列:Ext.TabPanel

    在本文中,我们将深入探讨ExtJS中的`Ext.TabPanel`组件,它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图,每个面板都有自己的标题,并且可以通过标签页进行切换。让我们...

    ExtJs选中var editor = new Ext.ux.grid.RowEditor详解

    ### ExtJs选中 `var editor = new Ext.ux.grid.RowEditor` 详解 在Web开发领域,特别是使用ExtJs框架进行复杂用户界面构建时,`RowEditor` 是一个非常实用的功能,它允许用户直接在表格行内编辑数据,极大地提高了...

    extjs-Ext.ux.form.LovCombo下拉框

    在EXTJS框架中,`Ext.ux.form.LovCombo`是一种自定义组件,它扩展了基本的`Ext.form.field.ComboBox`,提供了更丰富的功能,尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”(即“Look Up Value”...

    extjs中Ext.Panel和TreePanel 组件动态加载本地页面数据

    在EXTJS这个强大的JavaScript框架中,`Ext.Panel`和`TreePanel`是两个非常重要的组件,它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据,以提升用户体验并实现灵活的数据...

    extjs 可编辑的表格树 Ext.tree.ColumnTree Ext.tree.ColumnTreeEditor

    extjs 可编辑的表格树,每个单元格自定义编辑组件,可以自适应列宽,只有源码与例子,运行实例要修改路径,不然图片不能显示,注意etree.jsp的js引入路径...支持Ext2.x以上版本 如运行不了EmailTo : codeme9@gmail.com

    ExtJs4.0 使用心得@1 Ext.util.Format.Number()

    本文将深入探讨Ext.util.Format.Number()函数,它是ExtJS 4.0中的一个重要工具,用于格式化数字。 `Ext.util.Format`是ExtJS中一个非常实用的工具类,包含了一系列用于字符串、日期和数值等类型的数据格式化的静态...

    Extjs4.X下comboboxTree下拉树型菜单,完美支持多选、单选,绝对好用

    在ExtJS 4.x框架中,ComboboxTree是一种特殊的组件,它将传统的下拉框与树形结构结合在一起,提供了一种更为灵活的用户输入方式。这种组件在数据选择上非常实用,尤其当数据层级关系复杂时,可以方便地进行多选或...

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs提供了Ext.Ajax.request方法来进行Ajax请求,但默认情况下,该方法不支持waitMsg属性,不像fp.form.submit方法提供了waitTitle和waitMsg属性来实现等待提示。为了解决这一限制,我们可以采用Ext.MessageBox的...

    ExtJS ToolTip功能

    ### ExtJS ToolTip功能 #### 知识点详解 在ExtJS中,`ToolTip`功能是一种非常实用且灵活的功能,它允许用户在鼠标悬停在某个元素上时显示额外的信息。这种特性对于提高用户界面的可用性和用户体验尤其有用。本文将...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置清空日期的功能,这可能会在某些应用场景中造成不便。为了解决这个问题,我们需要自定义一个扩展,为日期...

    ext4.js 打包 最新文件

    注意:Extjs4.XX的只能用,Sencha Cmd 4.0.5 (Windows) 来打包,不然运行的时候会报错 需要JDK1.6 或 JDK1.7,测试用1.8也能正常运行,注意这点即可。 1.2Sencha安装 路径:D:\Sencha,安装后目录如下图: 1.3Ruby...

    Ext.ux.UploadDialog.zip

    这个"Ext.ux.UploadDialog.zip"压缩包包含了EXTjs的UploadDialog组件,方便开发者在自己的项目中直接使用。 UploadDialog组件的核心功能是提供一个用户友好的界面,让用户能够选择并上传文件到服务器。这个组件通常...

    ExtJs GridPanel双击事件获得双击的行

    在ExtJs中,GridPanel是用于展示数据的常用组件,它可以提供丰富的功能,如排序、分页、筛选等。在实际应用中,我们经常需要监听用户的交互行为,比如双击行进行进一步的操作。本篇文章将深入讲解如何在ExtJs ...

    Ext.Array例子

    在EXTJS库中,`Ext.Array` 是一个非常重要的工具类,它提供了许多方便的静态方法,用于处理JavaScript中的数组。这些方法旨在增强原生数组的功能,提高代码的可读性和效率。`Ext.Array` 包含了排序、查找、过滤、...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    ExtJs 3.x 分页树(Ext.ux.tree.PagingTreeLoader)是一个强大的扩展,它在处理大量数据时尤其有用,因为树形结构通常需要显示大量的层级和节点。这个组件引入了分页功能,允许用户逐步加载树节点,而不是一次性加载...

    Ext入门学习.docx

    1. 下载最新的 ExtJS 版本,目前是 ext-3.3-beta 2. 下载后解压,查看里面的包结构包括 adapter、build、docs、examples、resources、package、source 等 3. 开发时只需要把 resources 包中的 CSS 和图片文件放到 ...

    ExtJS 3.4.0中的 ext.jsb2 文件

    在ExtJS 4中,构建过程被重新设计,引入了新的构建系统,如使用`app.json`代替`ext.jsb2`。`app.json`包含了关于应用结构和依赖的信息,使得构建过程更加灵活和可配置。然而,由于`ext.jsb2`在4.0.0中不存在,如果你...

    Ext.Ajax.request2.x实现同步请求

    在EXTJS库中,`Ext.Ajax.request`是用于发送Ajax请求的核心方法,它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求,并探讨其背后的原理和注意事项。 首先,我们需要理解Ajax的本质,...

Global site tag (gtag.js) - Google Analytics