投放本站广告请联系: extjscn#126.com
第一章：序 第一次看到Extjs的效果，我被深深震撼了。这真是一个了不起的框架，统一的效果、丰富的控件、强大的功能、能任意改变的皮肤、完美的浏览器兼容、原生态的ajax、多种数据格式的支持、插件……我不知道该如何去表达我的兴奋和喜悦，就像年少时候看到一个心怡的姑娘，怦然心动。
Sencha Touch同样可以使用地图、多媒体等插件。 1、Map组件 我们通过Ext.Map定义Map组件，其xtype为map。除了使用该插件外，还要调用Google的地图API所使用的js文件，代码如下：
<script src=”https://maps.google.com/maps/api/js?sensor=true”></script>
DataView与数据库的交互还有许多更加深入的内容，包括与数据库、PHP等的综合运用，服务端数据的增删改查等。因为目前其实还处于入门阶段，所以我们将这一块最复杂的部分先放一放，接下来进入List组件的部分。
List组件继承了DataView的所有属性，它用于以列表等形式展示数据，是Sencha Touch中功能非常强大的一个组件。基本使用方法如下：
我们把数据可视化出来，为的就是进行一些针对数据的操作。这里介绍一下DataView的排序功能和搜索功能。掌握这两个技能，可以让写出的数据界面内的数据能够根据要求进行排序，可以进行数据的搜索显示灯功能。
一、排序 当我们想根据数据的某一个字段排序时，可以调用sort方法：
store.sort(‘lastName’,’asc’);
如果想对多个字段进行排序，可以执行如下代码：
DataView用于数据展示，我们来看看具体是如何将数据应用于该组件实现可视化的。
Sencha Touch支持XML和JSON的数据格式。二者虽然数据类型不同，但是在Sencha Touch中的操作都是类似的。我们来以XML举例。
因为之前接触的XML比较少，下面给出XML数据的基本格式：
DataView是Sencha Touch中最重要的组件，用于数据的可视化。数据可视化的重要性不言而喻，可以讲任何数据以形象的方式展示给用户。目前，如何更好地可视化是许多公司或框架都在追求的。通过数据的可视化可以发现数据之间的规律，预测未来的情况。下面我们就看看Sencha Touch中是怎么进行数据可视化的。
由于DataView组件内容非常多，所以将在以后的一段时间内持续这一部分的学习。
首先废话不多说，直接上使用DataView组件的代码框架。
除了append，可以使用overwrite函数重写一个元素的内容，道理同上 在指定的位置追加与删除元素，有以下方法： innsertAfter:在目标元素之后追加元素 innsertBefore:在目标元素之前追加元素 Ext.DomQuery:寻找元素，可以使用css的选择器选择，如： Ext.DomQuery.select(‘[class*=”d”]’)//选取class为d的元素 Ext.each:遍历所有追加的元素 Ext.removeNode:删除指定元素
本次我们来接触一下Sencha Touch中的AJAX以及 相应的后台PHP程序。 实现表单的AJAX异步提交 需要设定的参数： url:表单提交时的目标URL地址 standardSubmit:使用布尔值指定表单提交方式（true为同步，false为异步，默认为false）
这次主要介绍Sencha Touch中的XTemplate组件，利用该组件可以方便的构造html代码，很实用。为了减少不必要的说解，让内容更加简洁清晰，这里直接给出对应代码和代码的相应注释，只要有JavaScript基础的同学就能轻易掌握。
Sencha Touch中提供了许多组件，这一次以轮播组件（carousel）为引子，介绍一下Sencha Touch组件的使用方法。 以下先给出轮播插件的具体实现方法：
这里使用default定义了在这个fieldset中的默认labelwidth属性值都为20&（有很多陌生的地方暂且不用管，以后会说到） 此外，轮播组件还有以下其他属性： carousel.next();//显示之前一个 carousel.prev();//显示之后一个 carousel.setActiveItem(1);//指定显示任何一个 这里指的是轮播显示的界面
第一个要接触的就是面板这个组件，它是构建一个页面最基础的组件，其他的内容都要显示在这个面板中。 在上一篇中，我们就已经拿面板为例，介绍了创建组件的方法。这里再把创建面板的代码重复一下：
var panel = Ext.create('Ext.Panel', { fullscreen: true, id: 'myPanel', style: 'color:red', html: '一个简单的示例面板' });
有问题的话可以参考之前的博客。
了解了大致的Sencha Touch框架之后，我们就可以在其中进行代码的编写了。只要上一篇的内容都按部就班的做了，接下来要做的就是慢慢学这个框架，按照内容敲代码—看结果，基本没有什么过不去的地方。
首先跟上次一样，建立index.html文件和对应的app.js文件。用Sencha Touch搭建的移动web应用，app.js的内容框架大致如下：
这里希望通过我自己的学习经历，给大家写出最通俗，最方便的HTML5框架使用指南。
2016年，更加关注移动web应用相关开发，重心也放到了基于HTML5的移动app开发。从今天开始将展开Sencha Touch的学习之旅。
Sencha Touch是一款移动web应用开发框架，界面美观，接近原生。
万事开头难，今天我们先来进行文件下载和开发环境的配置。
JavaScript不需要编译即可运行，这让JavaScript构建的应用程序可以变得很灵活。我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互。下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体。
项目结构如下：其中GetJSUI一般处理程序用来从数据库表中抓取UI配置，并返回到客户端；Contents文件夹下用HTML文件和JS库等。
最近由于业务需要，研究了一下Sencha ExtJS 6 ，虽然UI和性能上据相关资料说都有提升，但是用起来确实不太顺手，而且用Sencha cmd工具进行测试和发布，很多内部细节都是隐藏的，出了问题不好跟踪。更奇葩的是明明在sencha app watch上运行很好，但是sencha app build后会出现异常。即使是这样，但Sencha ExtJS 6 在UI控件和编程模式上确实比较强大。下面介绍一个 Widget Grid 用法，可以在表格grid中进行列样式渲染，是一个比较强大的功能：
Sencha Ext JS号称是目前世界上最先进和最强大的、支持多平台多设备的JavaScript应用程序开发框架。首先看一下Ext JS的发展简史。
Ext JS的Grid是一个便于在布局中显示信息的伟大工具。有些用户可能会希望将这些信息打印为会议资料或宣传材料，而且会希望在打印的时候，能添加水印以便进行版权保护、保密或作为品牌的一种方式。
这个很容易实现，只要在Ext JS的Grid中为它指定一个样式就行了，而这只需要一些简单的CSS技巧。
实现这种效果的关键是修改单元格的样式，并在Grid中插入不透明且不会遮盖Grid内容的背景。
许多人可能对Ext JS中的图表包相当熟悉了。通过它可以快速创建相当强悍的可视化效果，如三维柱形图和三维饼图。通常情况下，对于应用程序来说，单单图表是不足够的，例如，想在应用程序中创建流程图、座位图、原理图，又或许是一些交互的动画等等。
Kevin Cassidy：全宽度的字段错误信息
有考虑过让验证信息显示在表单字段的下面（msgTarget:‘under’），但最后发现验证信息被压缩显示了吗？这是因为该方式显示的信息只会显示在输入自动的下面。还好，这里有一个简单的方式来解决这个问题，以便使用字段与标签合起来的整个宽度。
要实现该视觉效果，重写错误信息的样式就行了。要将这个应用到字段的单一实例，只需要将以下cls值添加到字段就行了：
在本文，在展示如何编写Ext JS 6通用应用程序代码以使控制器和视图模型能适用于特定视图又是共享的。
想了解更多有关Ext JS 6的信息吗？请报名参加培训班吧。
本文的重点是通用应用程序，而不是只能用于纯classic或纯Modern的应用程序。特别是，app文件夹在通用应用程序中具有独特的用途。
你可能已经听说过这个令人激动的消息，Ext JS已经将Sencha Touch组件合并到库里了。这将允许你使用传统的桌面Ext JS和移动Touch用户界面创建通用应用程序以运行在桌面、平板和智能手机上。
