Ext 设计师预览

Ext 设计师预览

October 8, 2009 by Aaron Conran

我们很高兴能分享我们的最新的 Ext JS 图形设计版本——设计师(Designer)。这个新版本增加了许多新功能,以提高您创建应用程序设计的效率。一旦你习惯使用这些性,那你就很难离开它了。对于那些没有时间或能力下载和试用设计器的朋友,我们特意创建了一个预览视频给大家观看。我们模拟了一些接口。我们尝试展示更多的特性和实用的功能。

新特性

  • 复制组件
  • 改造组件
  • 撤消/重做
  • 配置搜索
  • 自动更新
  • 截图

复制组件

在下认为,无论是复制与粘贴一组组的源代码,还是修改其配置项的内容是比较累的一件事情。设计师现在允许用户轻松地复制一批批的组件然后修改其中的配置项。

请看看下面这个简单快速的例子,我透过 duplicate 复制的功能很快地就构建起一个表单,不需要拖动组件,也不需要一次又一次地配置那些都一样的参数。

创建一个简单的 Form:

变形组件Transforming Components

当你为新的组件编写代码的时候,你可选择以原有的组件为基础扩展一个新类,或者就实例化这个组件,实例化过程中加入新的配置项内容。

例如:

MyGrid = Ext.extend(Ext.grid.EditorGridPanel, {

});
// or
new Ext.grid.EditorGridPanel({

});

设计师的开发过程就有点不同。假设已经创建好一个 GridPanel 然后打算转为一个 EditorGridPanel。我的操作就是,在 inspector 中右击组件,观察哪个变形的选项是可以选的。

GridPanel 就转换到 EditorGridPanel,反之亦然。

接着我们装配好这个 GridPanel。我们拖出一个 field 作为 Grid 的列,设计师会自动辨认出应该使用 TextField,然后到 EditorGrid 的时候就会转换可输入的 TextField。设计师都会帮您做好变形的工作。

另外一个有趣的变形是,转换 TabPanel 为 Panel 后,又将其转换为 accordion,都是没问题的。Fields 对象可以在这两种类型的切换中顺利变形。

组件的 Undo/Redo

当组合这些 UI 的时候,觉得有不对的话,使用顶部工具条的 Undo 和 Redo 的按钮,就可以把上一次的操作撤销或重做。该版本当前的限制就是,当你执行位于顶层组件转换(transform)的时候,undo/redo的 历史就会重新来过,复位了。 

配置项定位

组件被选择了,就应该可搜索一下欲知的配置项。这个关键的功能在早期的释出版本没有加上。这样的话查询配置项起来就会十分麻烦!视频中就如右边的截图所示,敲入“la”便会自动将匹配的结果排序排在前面。

配置项右边的叉叉就是复位用的,按默认的排序。当您觉得想移除某个配置项又不想只是设为空字符串"",那么这个特性挺方便的。

新加入的组件

一些新加入的组件有:

  • EditorGrid
  • ButtonGroup
  • BoxComponent
  • Slider

译注:关于可视化控件部分,我个人还有一点的建议,如果要锻炼自己,请不要使用现成的控件,特别是 Designer 的出现,完全把程序变成了一种搭积木的方式,如果不是快速开发产品的话,本人是不赞成这样做的,因为那样只会让你迟钝,而学不到任何东西。 要学会自己写组件,真的写不出,就看看一些 Ext 源代码,这样你的进步会更加地快。Edit:2010-01-05

时间: 2024-09-17 00:09:55

Ext 设计师预览的相关文章

非常HTML5预览:Video/Canvas/Ext JS

HTML5, Video, Canvas, and Ext JS January 14, 2010 by David Davis HTML5正要来临.本文将会检视一下两个HTML5开发至为引人注目的特性--视频Video及Canvas.Ext的大伙们都迫不及待地赶上新标准,看有什么可以为我们所承诺的.<video>标签是为了原生的视频渲染,这样的话就不用那些第三方的如Flash的插件.至于<canvas>标签,则是为了在像素级别,这么细的一个级别中"画出"复杂的

Ext JS 4的倒数:程序员预览 Countdown to Ext JS 4: Developer Preview

February 16, 2011 | Ed Spencer 翻译 Ext中文网(ajaxjs.com) Frank http://www.sencha.com/blog/ext-js-4-developer-preview/ Ext 4终于发布了,咱们可以下载源码看看.俺也第一时间.二话不说,搞份汉化的发布博文.Ext中文网定会持续跟进.frank 谨代表全体的ExJS项目开发组成员,我本人非常由衷地宣布Ext JS 4开发者预览版本,正式可用了!ExtJS4 不但为历来变革最大的一次版本,而

Ext 设计师面面观

前一段时间,小弟去收邮件的时候,就会发现有来自 extjs.com 的温馨提示,被告知 Ext 设计师(Ext Designer)正在测试,不日将会发布云云.上个礼拜,设计师终于结束 RC测试,以1.0正式版本面世于人了.虽不说千呼万唤始出来,但也引起了不小的骚动,何以见得?君不见 Javaeye 上计数器有 12100~,排名竟第一呵呵,对 Ext IDE 感兴趣.争相一睹设计师风采的朋友可谓络绎不绝. 在得知 extjs 正式发布后,小弟我便第一时间下载和安装.前一段时间,我已小译过一篇介绍

Ps Play让你在终端预览你的PS设计稿

Ps Play作为一个通过WiFi网络,能够让用户实时在终端设备上预览电脑上Photoshop的设计稿,然后还可同步调试及截图并保存到移动终端,可以让用户通过Email.微信等工具即时分享的跨终端应用.ISUX首个独立策划.设计及研发的跨终端应用产品终于华丽地诞生了. 而Ps Play在移动设计界可算是一个非常接地气的工具类产品,因为它结局了设计师日常工作遇到的问题,而产品创意的来源,来自于同事间的吐槽:"现在应该能有个工具,可以让手机同步显示在电脑上做的设计稿嘛--"而为了满足这种日

预览待上传的本地图片

上传 上传文件是一种很普通的Web应用,尤其以上传图片更为常见.今天我们就在Web标准的范围内谈谈与这个主题相关的内容(只限前端部分,上传的实现当然就不在此列了),关键词是:Javascript.DOM和Firefox. 表单 先创建一个file表单域,我们需要用它来浏览本地文件. <form name="form1" id="form1" method="post" action="upload.php"> &l

javascript预览本地图片

javascript <input id="file" type="file" ><br /><img id="img"  STYLE="visibility:hidden" height="100px" width="100px"> <script language="javascript" type="text/

可以在手机上快速预览应用图标的ICNS

  想预览图标?图片发手机改起来麻烦,软件同步总是容易假死.而今天推荐的ICNS ,则相对灵活了不少,多方案对比.和竞品对比.切换背景全都可以在应用中控制,省了不断改图的麻烦,一起来收! 前段时间我们在调整产品的 icon,视觉同学做了好几个版本的设计给大家做挑选.为了保证大家的真实感受,设计师不得不导出不同版本.组合的图标给大家(Sketch Mirrow 在公司网络下很成问题),一旦要临时调整所有的操作得再来一遍,事儿不难但是非常的繁琐. 可惜就在 icon 敲定之后我发现了这个叫做「ICN

port-ext文档预览中使用openoffice

问题描述 ext文档预览中使用openoffice soffice.exe -headless -accept="socket,host=127.0.0.1,port=8100;urp;" -nofirststartwizard java.net.ConnectException: connection failed: socket,host=127.0.0.1,port=8100,tcpNoDelay=1: java.net.ConnectException: Connection

那些开源的php Office,快捷得在线编辑预览文档

在Office 15即将发布之际我又发现了那些在开源的PHPoffice,一般的程序员.设计师他们距离Office办公套件也是蛮遥远的,但是如果真的要用了总不可 能去下载一个吧即使是WPS也需要时间,所以不如在自己的服务器上建立一个建议的PHP Office! 那些开源的php Office,快捷得在线编辑预览文档 这里的替代品(既简单又复杂),可能更加适合你. 从此我们在线观看文档不再需要豆丁和百度文库了!   PHPExcel PHPExcel   几乎支持所有常用Excel的功能的PHPE