中文教程

如何在ExtJS 6中使用Fashion美化应用程序

在Ext JS 6,一个最大的改变就是框架合并,使用一个单一的代码库,就可以为每一种设备开发各具有良好体验的最好应用程序。它还带来了一种美化应用程序的新方式。

在本文,重点是Sencha Fashion。这是什么?该如何使用它呢?在未来陆续的教程中,将为你展示如何去创建一个极好的暗黑主题。

编译主题

Ext JS应用程序的主题使用的是SASS,它是一种动态编写CSS代码的方法。例如,可以在样式表中使用变量和运算。浏览器并不了解SASS,它只知道CSS,隐藏,这些SASS主题需要被编译为浏览器能理解的,生产用的CSS代码。在Ext JS应用程序中可以通过在Sencha Cmd运行以下命令来编译主题:

使用Sencha ExtJS 6开发通用应用程序

在Sencha和整个Ext JS团队的支持下,我很高兴能跟大家分享一下有关Sencha Ext JS 6的更多细节。该版本向前迈出了一大步,支持使用一个单一的代码库来开发基于桌面、平板和智能手机的通用应用程序。我们成功的将Ext JS和Sencha Touch框架合并在一起。我想对在建立统一框架的这个旅程中,为我们提供了宝贵的反馈的Sencha社区和我们的客户说声感谢。我们一起创造了这世界上最先进和最强大的支持多平台、多设备Web应用程序开发的javascript框架。


在Ext JS应用程序中构建可维护的控制器

在eMortgage Logic公司,2011年底开始使用Ext JS 4。当时,还不知道如何正确编写Ext JS应用程序,但最后还是掌握了如何让应用程序实现所需的方法。不过,这并不意味着能很好的去实现他们。最终结果是,应用程序是由十几个大规模控制器实现处理的,而同时,视图使用的是一组简单的配置。控制器掌控着一切,但随着时间的推移,控制器变得越来越难于维护,这就让人开始怀疑当初的代码是否妥当了。

最后,我们试图让视图变得聪明一点,沿着这个思路,我们有点开窍了。最终,终于知道如何在控制器和视图之间划清界线了。为了说明我们团队新发现的这个知识,我撰写了以下这个指南。该指南使用了一个简单的方式来说明如何拆卸大的控制器并替换他们的的逻辑代码,以便于维护。这不仅有利于短期内使用Ext JS 4的团队,也有利于近期升级到Ext JS 5视图控制器的团队。

在这篇文章,将创建一个小型的控制和有几个需求的简单视图,然后通过几个步骤来分离他们。

本文最终的目标是创建一个实现以下要求的控制器和视图:

  • 提供一个表单让用户输入喜好
  • 保持喜好到用户的记录
  • 更新用户的名字和喜好等信息
[/code]

Sencha Cmd中脚本压缩方法之比较

概述

这么多年来,Web开发人员都被告知应优化他们生产环境的代码。传统的方法是将应用程序的所有脚步进行压缩以减少应用程序的大小,以便让应用程序加载更快。而Sencha Cmd这么多年以来已经将这个过程自动化了。

然而,许多客户,还不知道可通过调整Sencha Cmd的压缩代码来进行一些额外的处理。尽管Sencha Cmd默认是适应YUI压缩来进行压缩的,但还可以通过配置使用Google Closure或UglifyJS来进行压缩。下面将会介绍这些,并去测试哪一个压缩工具提供了最大的压缩效果。

要注意的是,本文的本意并不是让你使用某个特定的工具,至于选择哪一种,不选择哪一种,是有许多的因素决定的,本文只是尝试提供一些参考意见。

Sencha Touch 视频 - Sencha Touch 介紹

来自台湾陳慧鴻老师的作品,介绍得很详细;

普通话版, 很适合我这样英文不好的同学观看;

ComboBox 和 DateField 在IE下消失的解决方法

前言

作为Ext JS 的基本的Form 的组件, 这两个没有什么难的地方。
但是开发过程中却遇到了在 IE 浏览器中, 放大, 缩小窗口大小, 会导致 这两个组件消失不见。 点击某些地方又能显示出来。 不报任何错误。 在其他浏览器正常。

问题发生的状况

因为是在原项目的基础上导入Ext js , 所以页面中的form 并不是通过标准的 先创建form 组件, 再add form field 的方式进行的。
这里使用的 是纯html的form 和 input, 再使用Ext js 把 input render 成 Combobox 和 DateField.

在 ExtJS 中使用 Font Awesome

Font Awesome 是目前最流行的图标方案之一,是一套优质的图标字体库以及 CSS 图标框架。相对于传统的图片作为图标,字体图标支持自适应调节大小、可以使用字体的一些特性调整风格(颜色、大小、字体阴影)、更小的文件体积。

下载 Font Awesome

根据你或者项目的编程习惯,你可以通过以下几种方式获取最新版的 Font Awesome:

  1. 到 Font Awesome 项目主页, 点击 Download 按钮下载最新版本。
  2. 到 Font Awesome Github 主页, 下载最新版本或者 git clone 下来。
  3. 如果项目组有使用 bower 来管理第三方包,那么可以通过 bower install fontawesome 来获取 Font Awesome。

Font Awesome 的目录结构是这样,css 是 Font Awesome 提供的 CSS 类, fonts 内就是图标的字体文件,不同的格式是为了兼容不同的浏览器,并且新版本开始支持 SVG 的形式。less 和 scss 是用来管理 css 的。

升级到 ExtJS 5的过程记录

最近为公司的一个项目创建了一个 ExtJS 5 的分支,顺便记录一下升级到 ExtJS 5 所遇到的问题以及填掉的坑。由于 Sencha Cmd 的 sencha app upgrade 命令无法正常地讲项目升级至 ExtJS 5 (或许是方式不对) ,所以我的做法是新建一个 ExtJS 5 的项目,然后把 app 包拷贝过去,然后慢慢修复报错的东西,直到项目可以正常跑起。

说在前面:

升级的项目目前是一个十分初级的版本,代码量很少,只有导出报表和 dashboard 功能,主要是 Charts 的东西,并 涉及到 Grid 和 Tree 的使用,所以本文更多的是讲 ExtJS 5 Charts 部分的东西(变化的)。

ExtJs4常用函数

1.Ext.onReady()

该方法的调用发生在Document对象加载完毕之后,HTML的onload事件以及image加载之前.

第一个参数为加载后该方法调用的函数,第三个参数如果为true则第二个参数将成为fn的执行范围,第三个参数如果没有传递,则默认为true.

此函数非常重要,所有的资源都必须加载完毕方可进行ETJS的函数调用.Ext的DOm等都是动态生成的,而onReady的调用方法在所有Document对象都加载完毕的时候,所以为了保障请求是安全的,应该保持所有的处理都在onReady中进行.

调用格式:

Ext.onReady(Function fn,Object scope,boolean override)

参数说明:

fn:执行的函数.

scope:fn执行的范围,为可选参数.

override:表示是否以scope作为fn默认的执行范围,为可选参数,默认值为true.

返回值:无.

ExtJs4中的复选树级联选择

这几天要把项目中的几个模块有ext3升级到ext4,还要保持页面展示和功能要跟3.x版本的一样。升级并不是一件简单的是,基本相当于重写了,3.x版本的复选框树级联操作是在网上找的一个现成的插件,直接搬运到4.2中就不能用了,但是又找不到可用的插件。百度谷歌了好久,还真让我搞出来一个方法,记录下来吧,也分享给大家。如有不合理或者更好的方法希望不吝赐教。

在3.x版本中要实现级联选择的话,我使用的是一个TreeCheckNodeUI.js这个文件百度一下都能找到啊,就不详细说明了,很好用。

在4.2中实现的方法是在treepanel的配置项viewConfig中添加函数onCheckboxChange,表示复选框选择状态发生变化是触发的事件,先把代码贴出来:

ExtJS 刷新后,默认选中上一次选中的节点

在对树节点进行操作后往往需要进行reload操作刷新一下树,但是很多业务都需要在树形刷新后默认选中最后一次选中的节点。这样就必须先保存前一次选中节点的信息,在reload之后再次通过节点的信息进行expand逐层展开到这个节点上。

查询了好久终于找到一个可行的方案,就是通过节点的path来记录节点的位置信息,然后通过path从root节点开始逐层展开,直到最后一个节点。

完成的代码如下:

首先是extjs3.x版本中的方法:

Extjs MVC开发模式详解

在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题。Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式,开始将一个JS(Extjs)应用程序分割成Model-View-Controller三层,为JS应用程序的如何组织代码指明了方向,同时使得大规模JS代码变得更加易于重用和维护;这就是Extjs MVC开发模式的初衷。

在官方给出的MVC例子中,我们可以看到一个简单的列表编辑功能,这篇文章就围绕这个功能进行详细的讲解,让我们一起来揭开Extjs MVC的神秘面纱!

本文的示例代码适用于Extjs 4.x和Extjs 5.x,在Extjs 4.2.1 和Extjs 5.0.1中亲测可用!

针对多种设备定制ExtJS 5应用程序

概述


鉴于当今设备和表单因素的扩散,要针对所有这些可能性来优化应用程序已经变得越来越复杂。虽然可以使用CSS响应这些环境条件,但典型的,如Ext JS应用程序这样,还是要包含大量的Javascript。在某些情况下,使用javascript来针对设备细节进行编码可能很简单,但也可能很快就会失控。好消息是,在Ext JS 5.1,提供了几个功能强大的工具来管理这种复杂性。

在先前的文章已经介绍了许多这样的技术。这有助于去了解与比较他们之间的异同,以便于选择适合的工具来完成手头的工作。

别再用JS框架了

现在,JavaScript框架已成为Web项目开发不可或缺的一部分。那是因为很长一段时间以来,各种浏览器之间有很大的差别,人们不得不编写框架对此进行屏蔽。问题在于,各种浏览器甚至在基本问题上都难以取得一致,以致框架还要针对浏览器该如何工作设计自己的模型,比如如何传播事件、如何与DOM交互等。于是出现了许多框架,常见的有jQuery、Dojo、MochiKit、Ext JS、AngularJS、Backbone 、Ember、React等。对于这种情况,谷歌工程师Joe Gregorio在博文中写道:

"我认为是时候重新考虑JS框架模型了。没有必要发明另外一种做事方式,只要使用HTML+CSS+JS就行了。"

Sencah Touch英文书籍 《Sencha Touch in Action》

Jay Garcia develops Ext JS and Sencha Touch applications for various clients around the world and actively contributes to the Sencha community as a speaker, advocate, and frequent poster on technical forums. Author of Ext JS in Action, Jay has been a Sencha enthusiast and supporter since 2006. Anthony De Moss has been an avid Ext JS enthusiast since 2007 and is fanatical about good product design and usability. On the rare occasion he's away from his keyboard, you can find him climbing at the local rock gym. Mitchell Simoens has been working with Ext JS since late 2006 and Sencha Touch since 2010. He now works at Sencha doing primarily support on the forums but also works on Ext JS and Sencha Touch.

将Ext JS 5应用程序导入Web项目以及实现本地化

在Ext JS 5,使用了新的脚本和样式加载方式,这对于将应用程序导入到Web项目中产生了点小麻烦。而对于本地化文件的导入,也采用了新的方式,本文将一一解答这些问题。

将Ext JS 5应用程序导入Web项目

在Ext JS 5,会使用bootstrap.js来加载应用程序脚本和样式,而bootstrap.js是根据Bootstrap.json来加载样式文件和脚本的。问题就在这个Bootstrap.json文件上,如果是使用IIS的Web项目,首先会碰到的问题是Web服务器不允许下载JSON文件,这时候,就得先解决这个问题,不然加载肯定会出错。

如果认真研究一下bootstrap.js文件,会发现它主要用来获取脚本和样式文件的地方是Bootstrap.json中的js和css成员值。在自动生成的Bootstrap.json文件中,脚本和样式文件的默认路径就是没有路径,也就是与首页文件是同一路径,这样,当首页文件与脚本和样式文件不在同一路径,就加载不了脚本和样式了。由于Bootstrap.json文件中要加载的脚本文件很多,要直接修改Bootstrap.json文件中的文件的路径,不太现实。那就只能在bootstrap.js文件中找寻解决方案了。

了解ExtJS 5的小部件

在Ext JS 5,引入了新的“widgetcolumn”,支持在网格的单元格中放置组件。同时,还在Ext JS 5引入了一种新的被称为“小部件”的轻量级组件。在Ext JS 5中,已包含了几个小部件,在本文将告诉你如何轻松的去打造自己的小部件。

为了说明其中的关键概念,在文中将创建一个简单的名为“ratings”的如下图所示的小部件:


在Sencha应用程序中使用插件和Mixins

概述


当扩展一个框架类的功能的时候,通常都会直接将新功能写入派生类,然而,如果所需的同一功能存在于多个组件,那最有效的方式就是将它定义为一个插件或混入。插件和混入都是用来将额外功能添加到其他类的类。在本文,将介绍这些类是什么,他们之间的区别,以及他们如何工作。在Sencha Fiddle,我们准备了一些示例来演示这些概念。

Sencha Touch打造超级奶爸之喂养记APP(附源码)

起源

  非常高兴我的宝宝健康平安的出生了。对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常。最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便,体温等情况。我想医生们应该也是通过这些数据来分析宝宝是否健康。宝宝刚才出生的几天,吃喝,大小便很频繁,

但又不方便记录,很容易遗漏,所以想做一个APP来记录宝宝的一些数据。最近正在学习Sencha Touch+PhoneGap,经过几天的开发,基本成型,目前我的宝宝一些数据都是用这个软件来记录的。同时也分享给大家,希望能对更多的人有用。初次开发,还有很多不周全的地方,望各们指正。

  宝宝刚出生这一段时间主要需要记录的数据有:妈妈喂奶次数,喝牛奶多少量,大小便多少次,体温多少,睡了多长时间。APP也是围绕这几个功能进行开发。

最终效果



热门技巧

移除网格中单元格的焦点

由Ext JS 5.0.1开始,我们已经添加了对可访问性和ARIA的支持的一些显著改善。虽然我们鼓励用户使用这些新增加的功能,但我们知道并不是所有用户都喜欢默认的风格。事实上并非常所有情况下焦点都在单元格边框内;

如果你想调整焦点的样式,最好是通过修改你的SASS变量并重新编译你的样式;

  • $grid-row-cell-focus-background-color
  • $grid-row-cell-focus-border-color
  • $grid-row-cell-focus-border-inset
  • $grid-row-cell-focus-border-style
  • $grid-row-cell-focus-border-width
  • $grid-row-cell-focus-color