jQuery MiniUI,Ajax Web开发

中文教程

ExtJS 4.1视频教程下载

第1讲.ExtJs初识及其环境搭建
第2讲.开始ExtJs梦想之旅
第3讲.ExtJS工具栏、菜单栏
第4讲.ExtJS最常用的表单之textfield控件
第5讲.ExtJs最常用表单组件Number、CheckBox、Radio
第6讲.ExtJs最常用表单组件ComboBox、time、date
第7讲.ExtJS面板Panel
第8讲.EXtJS布局模式-Auto布局、Fit

ExtJS 4 MVC 应用程序框架搭建

前言


大型客户端应用程序总是很难编写,很难组织和很难维护。随着功能的增加和更多的开发人员加入项目,对项目的控制也越来越困难了。Ext JS 4 提供了一个新的应用程序框架帮助组织代码。
模型 - 一组栏位和数据的集合。Model (在Ext JS 3中使用Record class)
视图 - 组件类型, grids,trees 和 panels 都是属于试图
控制器 -- 用来渲染试图,实例模型和其他的应用逻辑

文件结构


ExtJS4 遵循统一的目录结构。看一个例子:

ExtJS 4后台保存Chart图片

前言


对于ExtJS 来说,在 Ext.chart.Chart 这个类直接有提供一个 save( [config] ) 的方法, 调用这个方法, 就可以在browser 下载当前这个chart 的对应格式的图形文件。

ExtJS 4浏览器兼容

前言


按理说, Ext js 的开发应该没有浏览器兼容的问题,因为Ext js 本身就有考虑各浏览器兼容的状况。
本篇讨论的与其说是Ext js 开发的兼容性问题, 还不如说成是web 开发的兼容性问题。

ExtJS 4 带星期的日期选择控件

前言


ExtJS 3 和 ExtJS 4中都有提供日期选择的组件(当然早期版本也有)。
但是有一些日期选择的需求是要看到星期,就是日期中的哪一天是这一年的第几周。
遗憾的是ExtJS 并没有提供这样的配置。

ExtJS 4 拖放[drag and drop]

定义拖放


一个拖动操作,就是在某个页面元素上按下鼠标并移动。一个放下操作,就是在拖动动作之后放开鼠标。可以从下图来看:

Ext JS 的Ext.dd 类中定义了基本的拖放操作。

ExtJS 3升级到ExtJS 4

前言


若干年前,使用ExtJS 3 开发了一个系统。
随着ExtJS 4的出现,总是会看到或听到关于Ext 比较多的言论是 :
ExtJS 4 较Ex JS 3 有较大的改变。
ExtJS 4不向下兼容。
ExtJS 4 开始收费了。
基于这些,对ExtJS 4一直就望而却步。

ExtJS 4 升级指南

前言


Ext 4 在web 应用程序开发迈出了革命性的一步。 基本上框架的每个主要组件都做了改善,在Ext3的基础上,新增了不少新的组件和子系统。本篇介绍Ext 3 到 Ext 4 的主要变化。

Ext3 兼容性
Ext 提供了Ext 3 和 Ext 4 的迁移包。

ExtJS面向对象

序言

  1. ExtJs是一套很好的后台框架。现在很流行的,我们要会。
  2. 这是我写ExtJs的第一篇,以后会写很多直到把这框架运用的炉火纯青,走火入魔。

ExtJs中的命名空间

我是做.net的,这命名空间名字一样,功能也一样,都是对项目中类进行有效的管理,区分类的作用域。他们的层次结构都是使用“.”来划分的。只不过定义的时候不一样。Ext是通过namespace()方法来定义的。(这里我先不展示,例子中我会用到的)

《轻松搞定ExtJs》

第一章:序
第一次看到Extjs的效果,我被深深震撼了。这真是一个了不起的框架,统一的效果、丰富的控件、强大的功能、能任意改变的皮肤、完美的浏览器兼容、原生态的ajax、多种数据格式的支持、插件……我不知道该如何去表达我的兴奋和喜悦,就像年少时候看到一个心怡的姑娘,怦然心动。

移动web应用开发-Sencha Touch篇(12)

Sencha Touch同样可以使用地图、多媒体等插件。
1、Map组件
我们通过Ext.Map定义Map组件,其xtype为map。除了使用该插件外,还要调用Google的地图API所使用的js文件,代码如下:

<script src=”https://maps.google.com/maps/api/js?sensor=true”></script>

引入该文件后,我们就可以编写js代码来显示地图了:

移动web应用开发-Sencha Touch篇(11)

DataView与数据库的交互还有许多更加深入的内容,包括与数据库、PHP等的综合运用,服务端数据的增删改查等。因为目前其实还处于入门阶段,所以我们将这一块最复杂的部分先放一放,接下来进入List组件的部分。

List组件继承了DataView的所有属性,它用于以列表等形式展示数据,是Sencha Touch中功能非常强大的一个组件。基本使用方法如下:

移动web应用开发-Sencha Touch篇(10)

我们把数据可视化出来,为的就是进行一些针对数据的操作。这里介绍一下DataView的排序功能和搜索功能。掌握这两个技能,可以让写出的数据界面内的数据能够根据要求进行排序,可以进行数据的搜索显示灯功能。

一、排序
当我们想根据数据的某一个字段排序时,可以调用sort方法:

    store.sort(‘lastName’,’asc’);

其中,store是我们定义好的数据仓库,调用sort方法进行排序。sort方法传入两个参数,第一个参数为按照哪个字段排序,第二个参数为升序还是降序。

如果想对多个字段进行排序,可以执行如下代码:

移动web应用开发-Sencha Touch篇(9)

DataView用于数据展示,我们来看看具体是如何将数据应用于该组件实现可视化的。

Sencha Touch支持XML和JSON的数据格式。二者虽然数据类型不同,但是在Sencha Touch中的操作都是类似的。我们来以XML举例。

因为之前接触的XML比较少,下面给出XML数据的基本格式:

移动web应用开发-Sencha Touch篇(8)

DataView是Sencha Touch中最重要的组件,用于数据的可视化。数据可视化的重要性不言而喻,可以讲任何数据以形象的方式展示给用户。目前,如何更好地可视化是许多公司或框架都在追求的。通过数据的可视化可以发现数据之间的规律,预测未来的情况。下面我们就看看Sencha Touch中是怎么进行数据可视化的。

由于DataView组件内容非常多,所以将在以后的一段时间内持续这一部分的学习。

首先废话不多说,直接上使用DataView组件的代码框架。

移动WEB应用开发-SENCHA TOUCH篇(7)

除了append,可以使用overwrite函数重写一个元素的内容,道理同上
在指定的位置追加与删除元素,有以下方法:
innsertAfter:在目标元素之后追加元素
innsertBefore:在目标元素之前追加元素
Ext.DomQuery:寻找元素,可以使用css的选择器选择,如:
Ext.DomQuery.select(‘[class*=”d”]’)//选取class为d的元素
Ext.each:遍历所有追加的元素
Ext.removeNode:删除指定元素

移动WEB应用开发-SENCHA TOUCH篇(6)

本次我们来接触一下Sencha Touch中的AJAX以及 相应的后台PHP程序。
实现表单的AJAX异步提交
需要设定的参数:
url:表单提交时的目标URL地址
standardSubmit:使用布尔值指定表单提交方式(true为同步,false为异步,默认为false)

移动web应用开发-Sencha Touch篇(5)

这次主要介绍Sencha Touch中的XTemplate组件,利用该组件可以方便的构造html代码,很实用。为了减少不必要的说解,让内容更加简洁清晰,这里直接给出对应代码和代码的相应注释,只要有JavaScript基础的同学就能轻易掌握。

一、利用XTemplate创建HTML代码


移动web应用开发-Sencha Touch篇(4)

Sencha Touch中提供了许多组件,这一次以轮播组件(carousel)为引子,介绍一下Sencha Touch组件的使用方法。
以下先给出轮播插件的具体实现方法:

这里使用default定义了在这个fieldset中的默认labelwidth属性值都为20&(有很多陌生的地方暂且不用管,以后会说到)
此外,轮播组件还有以下其他属性:
carousel.next();//显示之前一个
carousel.prev();//显示之后一个
carousel.setActiveItem(1);//指定显示任何一个
这里指的是轮播显示的界面

移动web应用开发-Sencha Touch篇(3)

第一个要接触的就是面板这个组件,它是构建一个页面最基础的组件,其他的内容都要显示在这个面板中。
在上一篇中,我们就已经拿面板为例,介绍了创建组件的方法。这里再把创建面板的代码重复一下:

var panel = Ext.create('Ext.Panel', {
            fullscreen: true,
            id: 'myPanel',
            style: 'color:red',
            html: '一个简单的示例面板'
        });

有问题的话可以参考之前的博客。