jQuery MiniUI,快速开发WebUI界面

中文教程

Extjs 基础篇—— Ext.DomQuery

Ext.DomQuery,根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上(如果给出了一个内容节点)。 简单的说就是选择器。
DomQuery的核心方法就是:CSS选择器和XPath语法。
DomQuery支持4种选择器:元素选择器、属性选择器、伪类、CSS选择器。
1.元素选择器

Extjs 基础篇—— Ext.DomHelper

Ext.DomHelper是处理DOM或模板(Templates)的实用类。其实就是对原生的DOM操作进行封装、改进,让我们更加方便的操作DOM元素。
Ext.DomHelper的主要方法如下:
1.append( String/HTMLElement/Element el, Object/String o, Boolean returnElement )
2.insertHtml( String where, HTMLElement el, String html )
3.overwrite( String/HTMLElement/Element el, Object/String o, Boolean returnElement )
4.createTemplate( Object o )
例子:

Ext.DomQuery.selectValue()

例句:
loginResult.state = Ext.DomQuery.selectValue('/LoginResult/State',response.responseXML);
说明:
1.Ext.DomQuery :根据编译请求提供高效的将选择符 / xpath 处理为可复用的函数的方法。可以添加新的伪类和匹配器。该类可以运行于 HTML 和 XML 文档之上(如果给出了一个内容节点)。

Extjs 基础篇—— Ext操作DOM

一 这里要记住三个核心工具类:Ext.Element, Ext.DomHelper, Ext.DomQuery。

二 说明一下,这里的ExtJs用的是3.x的版本
三 Ext.Element.get(),获取的是Ext.Element的实例,而不是原生的

标签。

Extjs 基础篇—— DOM操作

一 节点的访问
var div = document.getElementById('myDiv');
二 节点的创建

var div = document.createElement('div');
   div.id = 'newDiv';
   document.body.appendChild(div);
   // 指定位置
  document.body.insertBefore(div,document.getElementById('myDiv'));

三 节点的删除

Extjs 基础篇—— js基础

一 变量
1. 使用var声明的是局部变量,不使用var定义的是全局变量。
二 对象和数组
1.对象的定义和操作

Eclipse 部署ExtJs

一个项目要用到EXTJS,从今天开始看EXTjs方面的书,今天了解了Eclipse部署EXTJS,和利用插件实现智能提示,接下来详细阐述一下。

1,在EXTJS官网下载EXTjs,http://extjs.org.cn/ 我下载的版本是ext3.4.0,最新版本4.0.7,但好像eclipse还不支持,所以就放弃了!

2,将ext3.4.0部署到eclipse项目中。即:将ext3.4.0.zip文件解压后,把几个必需的文件或者文件夹导入项目中即可,包括,adapter文件中的ext-base.js,文件夹中ext-all.js文件,以及resources文件夹,即可

3,在html调用extjs时,一定要注意引用的文件的顺序和路径

<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="http://www.cnblogs.com/ext-all.js"> </script>

Extjs grid设置单元格字体颜色,及单元格背景色

上面这种是最简单的,设定固定的某单元格中字体颜色。

Extjs formpanel加载数据的两种方式

1。formpanel数据源和grid相同,使用 Form.getForm().loadRecord(row);则数据便可自动加载在formpanel中对应的控件。

2。formpanel数据源是单独的,则store传入到formpanel页面后,还需要手动将formpanel中的每个控件用value赋值,形如:

Ext.form.DateField简单用法及日期范围控制

项目中有时需要用到起始日期和结束日期,要做到起始日期必须小于结束日期。在extjs中已经有现成的函数,摘录如下:

然后分别定义起始日期和结束日期控件:

ExtJs计算两个DateField所间隔的月份(天数)

需求:两个DateField控件,分别为开始时间和结束时间。当选择完结束时间后,自动计算这两个时间段所间隔的月或天数。

需要解决的问题:

1.直接使用Ext.getCmp('endDate').getValue()所取得的日期无法直接使用,需要使用Ext.util.Format.date()格式化

2.默认计算得到的时间差为毫秒,需要转换。1天=86400000毫秒。

3.得到的数需要使用Math.round()函数取整数。

4.为结束时间的日期控件加监听事件。

ExtJs 实现 NumberField 即时计算

例如有三列NumberField,分别是:开始量 结束量 差。实现输入完开始量和结束量,即时自动计算差并填充。

在Ext.form.NumberField加入listeners,选用的事件为“change”

Extjs实用简单小功能总结

1、数组求最大,最小值,判断是否包含元素
2、过滤Backspace回退键
3、IE下获取name属性元素
4、设置可编辑表格是否可编辑
5、自定义clearAll()函数

移动 Web 应用程序框架比拼,第 4 部分: 依赖于 Sencha Touch 的一个完整移动 Web 解决方案

移动 Web 应用程序开发有望通过一个应用程序便可接满足许多用户的要求。许多出色的框架都能帮助您完成这项任务,本系列讨论了其中几个框架。通过缩小受支持设备的范围,调整运行某些版本的 Android 或 iOS 的设备的范围,您的应用程序的复杂性降低了,而潜在功能却增加了。这正是 Sencha Touch 背后的理念,该移动 Web 应用框架基于 JavaScript 库(过去称为 Ext JS)。事实上,Sencha Touch 为高端智能手机提供了完整的移动 Web 解决方案。

ExtJs中Store简介(秘籍)

1.什么store?
Store类似于一个本地仓库(即数据存储器),包括有 ArrayStore,DirectStore,GroupingStore,JsonStore,XmlStore(都是store的子类)
最终主要用于提供给panel去显示.
Store由Proxy(数据源)和DataReader(解读数据)组成。
一.(Proxy)数据源:一般是后台的值,习惯性的把它转换成json对象给store(注:个人理解)
二.(DataReader)读取数据:获得了数据后需要解析数据,DataReader(fields属性其实是Record对象的)解析数据并指定格式.
三.store存储好的数据最后交给panel

Sencha 2.0 基于HTML5的SessionStorage的使用

sencha 2.0 支持html5的sessionstorage ,
定义sessionstorage:使用起来,就像普通的store一样,先define一个model,并给与id,(这样做是为了下一次读取session时,定义一个model,也使用这个id,就取到这个model的值了),并且feild里面也要定义个id的字段,(这样做,是为了add一个session的值的时候,通过这个id辨认不同的session组)
然后定义store,使用add方法,如:add({id:'user',name:'chris',password:'123'}); id为这个session组的识别,最后还要sync()或者save()同步这个store;

Sencha View页面的push方法使用

sencha规定push(),pop()方法效果很好,但只能使用在Ext.navigation.View类型的页面里进行,如何能使用它呢?sencha的example里其实也有这种用法。
即时,在引入的第一个view,做空箱子,把别的不是Ext.navigation.View类型的页面push或者pop进来,比如:在app.js处引入了Main这个navigation类型的view :

Sencha表单里的日期输入框获取日期值进行比较

encha 做有自己的输入日期输入框,xtype: 'datepickerfield'。
提交表单后,如果是使用getValue(),那么取到的值是一个日期对象;如果是用getFormattedValue(),取到的值是一个显示区域的格式的值,比如设置有:dateFormat : 'd/m/Y', 那么取到的值也是d/m/Y格式;如果需求要求显示的日期刚好能进行比较,那就还好;如果不一样,方法有两种了:
1、取到格式化的值,然后进行字符串切割,做到可以加减比较来算出天数,不过相差月份转换为天数,也是一个难题,因为有大小月,闰月的说法,这种做法不合理,效果也差;
2、用getValue(),取到对象,然后使用js的日期函数,进行计算:
先取得日期输入框的对象

浅谈 Sencha 2.0 中image和carousel的图片自适应大小的应用

在sencha 2.0中,经常会用到xtype:image, 但是这个类型的使用,它的表现形式都是一个

,然后给把我们要显示的图片作为背景图片放入这个div中,这样,我们往往不好设置它的大小,因为图片是背景图片,高宽都不如标签进行控制的好。
尤其是当我们使用xtype:carousel这个类型时,如果代码是这样:

ExtJs视频教程(全)

ExtJs视频教程(全)

这个视频应该是现今为止最全的ExtJs视频里,一共有50多篇,非常适合那些不喜欢看文字的同学观看.

感谢 "紫飞鱼" 整理.

视频观看地址:

http://www.56.com/w31/album-aid-9962591.html