jQuery MiniUI,快速开发WebUI界面

中文教程

ExtJS学习心得(二)

其实Ext.Ajax的使用并不难,只是当初我一直不清楚如何获取其返回值,搞得郁闷了一阵子,以下是一个比较简单的例子
[code]
1Ext.Ajax.request({
2 url: 'Register.aspx',
3 params: {
4 oper: 'login',
5 LoginEmail:Ext.get('LoginEmail').dom.value,

ExtJS 学习心得(一)

一个偶然的机会,我发现了ExtJS框架,第一次看到其创建出来的效果时,简直兴奋死我啦,呵呵,没想到还有这么漂亮的UI控制,但使用起来却感觉不太爽,其一大缺点就是所带的类库太庞大啦,会比较影响速度,而且帮助文档全部是英文,英文的也还好啦,更重要的是其文档并没有相关的例子,只是列

Ext是什么

ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写 的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇)

最近园子里有很多朋友关心ExtJS,我最近写了一个项目管理工具用到ExtJS,我结合.NET写了个关于Grid实现的一个实例供需要的朋友参考。
    本实例开发环境是:Windows XP + Sql Server 2005 + IIS6+VS 2008 Beta2(.NET Framework3.5)
    实现步骤:
    1.取数据源

ExtJS与.NET结合开发实例(Grid之新增——Form提交篇)

我们新增记录功能的步骤如下:
    1.新建FORM
      FORM的建立是用ExtJS实现在GridForProjectLists.js文件中的。注意的是,我同时做了个ExtJS的ComboBox
      ComboBox实现:     

EXT调用ASP.NET AJAX WebService

ExtJS与.NET结合开发实例(Grid之批量删除篇)

上接ExtJS与.NET结合开发实例(Grid之数据显示、分页、排序篇),在此基础上实现批量删除功能。
     实现的步骤如下:

Ext.widgets-grid(2)

Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number    //点几次开始编辑,默认为2
}

方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑

事件

Ext.widgets-grid(1)

Ext.grid.ColumnModel
用于定义Grid的列
用例
var colModel = new Ext.grid.ColumnModel([
    {header: "Ticker", width: 60, sortable: true},
    {header: "Company Name", width: 150, sortable: true}
    ]);

Ext.widgets-Tree

Ext.tree.TreePanel
树状控件,继承自panel

config定义{
animate : Boolean,
containerScroll : Boolean,
ddAppendOnly : String, /*很显然这是api的一个错误,treepanel.js中惟一用到它的地方是this.dropZone = new            Ext.tree.TreeDropZone(this, this.dropConfig || {

Ext.widgets-menu

Ext.menu.Menu
菜单对象

config{
    allowOtherMenus : Boolean    //允许同时显示其它的菜单?
    defaultAlign : String        //默认对齐方式:tl-bl?
    defaults : Object        //默认的菜单项配置,将会应用到所有的items
    items : Mixed    //菜单项数组

Ext.widgets-toolbar

Ext.Toolbar
工具栏,使用起来很简单,add已准备好的元素就行

方法
Toolbar( Object/Array config )
构造

add( Mixed arg1, Mixed arg2, Mixed etc. ) : void
增加元素
可以是
1:Ext.Toolbar.Button            相当于addButton

Ext.widgets-form(下) ComboBox, TimeField, DateField, TriggerField, TextArea, NumberField

Ext.form.NumberField
继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件

config定义为{
    allowDecimals : Boolean    //true
    allowNegative : Boolean    //true
    baseChars : String    //'0123456789'
    decimalPrecision : Number    //精度,默认值2
    decimalSeparator : String    //小数分隔符
    fieldClass : String    //默认样式为x-form-field x-form-num-field
    maxText : String
    maxValue : Number    //默认Number.MAX_VALUE

Ext.widgets-form(上)BasicForm/ Field/ Checkbox/ Radio/ HtmlEditor/ TextField

Ext.form.BasicForm
对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式
var myForm = new Ext.form.BasicForm("form-el-id", {
        onSubmit: Ext.emptyFn,
        submit: function() {
            this.getEl().dom.submit();

Ext.widgets-Button,SplitButton,CycleButton

Ext.Action
action实现一个脱离了容器的事件,所有它可以在多个容器之间共享,不过好象只有Ext.Toolbar, Ext.Button 和 Ext.menu.Menu支持action接口:),因为容器要实现下面所有的方法setText(string), setIconCls(string), setDisabled(boolean), setVisible(boolean) and setHandler(function)

方法:

Ext.data-Tree/ Node

Ext.data.Tree
继承自Observable,用于存放树装的数据结构

方法
Tree( [Node root] )
以root为根构造Ext.data.Tree对象

getNodeById( String id ) : Node
由指定id得到节点

getRootNode() : Node
得到根节点,由属性root得到更方便

Ext.data-GroupingStore/ JsonStore/ SimpleStore

Ext.data.GroupingStore
继承自Ext.data.Store,为Store增加了分组功能.其它用法与Store一致,惟一需要注意的是使用GroupingStore时必须指定sortInfo信息
增加了配置属性
groupField : String//用于分组的字段
groupOnSort : Boolean//如果为真,将依排序字段重新分组,默认为假

Ext.data-Store

Ext.data.Store
store是一个为Ext器件提供record对象的存储容器,行为和属性都很象数据表

方法:不列举继承来的方法
Store( Object config )
构造,config定义为{
 autoLoad : Boolean/Object,    //自动载入

Ext.data-DataReader/ArrayReader/JsonReader/XmlReader

Ext.data.DataReader
纯虚类,从数据源得到结构化数据转换为元数据对象,对象包含Record的集合,一般用做Store对象的元数据,
具有如下格式
{
totalRecord:int,
records:Array of Ext.data.Record
}
具体使用参见三个子类

Ext.data-DataProxy/ HttpProxy/ MemoryProxy/ ScriptTagProxy

Ext.data.DataProxy
数据代理类是一个纯虚类,主要用于生成Ext.data.Record对象,没有公开的属性和方法,只是归定子类需要处理三个事件
beforeload : ( Object This, Object params )
load : ( Object This, Object o, Object arg )
loadexception : ( Object This, Object o, Object arg, Object e )