关闭

Ext 设计师预览

3645人阅读 评论(2) 收藏 举报

Ext 设计师预览

October 8, 2009 by Aaron Conran

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

新特性

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

复制组件

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

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

创建一个简单的 Form:


变形组件Transforming Components

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

例如:

设计师的开发过程就有点不同。假设已经创建好一个 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

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

EXT+struts2实现文件的预览和下载

jsp实现寥寥几句代码 :a标签嵌个流,点击便可实现。那么extjs的下载又是怎个样子呢?没有了a标签,我们如何定位流路径呢?如何根据文件类型找到并生成相应流? 如何配置定义格式,使我们下载的文...
  • qiyuexuel
  • qiyuexuel
  • 2014-03-31 09:58
  • 2119

Extjs4 图片上传 预览

Ext.require([ 'Ext.form.*' ]); var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([...
  • liubo682115
  • liubo682115
  • 2013-05-24 18:09
  • 3801

ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽

ExtJs 完美实现图片在Window窗口中通过鼠标滚轮放大缩小以及点击拖拽以下内容需要一定的ExtJs以及Js知识基础 ExtJs 完美实现图片在Window中通过鼠标滚轮放大缩小以及点击拖拽以下...
  • lany1988
  • lany1988
  • 2017-04-25 09:54
  • 1194

Android Studio 2.2 预览 - 新的UI设计师和约束布局

Android Studio 2.2中预览 - 新的UI设计师和约束布局 由贾马尔-陈奕迅,产品经理,机器人 本周在谷歌I / O 2016年,我们推出Android Studio 2.2...
  • aibieqing241
  • aibieqing241
  • 2016-05-25 10:03
  • 6930

ext图片上传前预览小demo

  • 2017-08-02 14:33
  • 1KB
  • 下载

[EXT.NET]GridPanel列表增删改预览

这个例子只是Coolite一个很简单的应用,我相信新手学习还是用的到的.也给大家带个头,写篇新手教程. GridPanel就不作介绍了,asp.net开发人员应该比较熟悉了.官方的GridView绑...
  • david_520042
  • david_520042
  • 2012-06-21 10:04
  • 4390

Ext 图片上传及预览,兼容多中浏览器

1、说明x-form-el-browseImage可以通过开发人员工具在html代码中查得//创建表单面板 var buildFormPanel = function(){formPanel = ...
  • NFA_YY
  • NFA_YY
  • 2017-06-23 09:33
  • 292

Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例

Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例 分类: Web开发 ExtJS HTML5 Java2012-05-10 22:54 31...
  • mengzhengjie
  • mengzhengjie
  • 2013-07-17 15:01
  • 1208

ExtJS 4 Beta 2预览:Ext.Brew包

我们还没有介绍过ExtJS 4众多特性之一的新Ext.Brew包。这是独一无二的Javascript框架,Ext.Brew是采用Sencha独特技术酿造的的一杯完美的茶。     使用新数据包的强大...
  • tianxiaode
  • tianxiaode
  • 2011-04-02 14:52
  • 1712

Ext4+Servlet+HTML5实现实时获取文件上传进度、本地预览、文件拖拽上传的相册实例

今天晚上花了几个小时的功夫做了一个相册,类似于QQ空间的文件上传,不过我用的Ext+HTML5等新的技术,结合Servlet上传文件。有几个特点: 文件拖拽上传实时获取上传进度本地预览与Ex...
  • leecho571
  • leecho571
  • 2012-05-10 22:54
  • 11754
    个人资料
    • 访问:1984852次
    • 积分:19781
    • 等级:
    • 排名:第502名
    • 原创:257篇
    • 转载:19篇
    • 译文:55篇
    • 评论:940条
    我的开源项目
    最新评论