如果你想实现什么特效，这个文字不适合你，但如果你想Ext文章，我想鄙人的小文非常适合你。
另：这篇教程是建立在Ext2.2上的。这个很多教程都没说明。让人很糊涂。我在此特别说明
网上很多教程，但是实际使用并不是很多，我想作为一个星期一个星期的总结来给各位网络上的朋友带来帮助。希望各位有用。我会从每个细节都说明，尽量不漏掉作为初学者需要知道的基础知识。第一次写教程，见笑了。
因为我学这个是这样一个过程，通过一个控件了解其他的控件，剩下的就是属性查API了。API我自己在翻译CHM版的。因为是个人操作。所以时间有限。。大家见谅。
在Ext下。首先接触的一定是Grid。我也是如此。我是因为 Grid与Ext结缘。
下面先说一下Ext类的申明形式。
以Grid为例
Js代码
复制代码 代码如下:
var grid=new Ext.form.GridPanel({
这里是属性。
});
var grid=new Ext.form.GridPanel({
这里是属性。
});
这个申明和java的面向对象很相似。以new关键词作为建立GridPanel类的实例，关于面向对象的基础知识就不在这里展开了。只是在写这个总结的时候常用到面向对象的概念。个人觉得学程序，不管你学不学java。think in java必须看完，如果你想学好最好看英文版。因为一句话你可以反复的揣摩。加深印象。我才看到一半都觉得他对一个人的程序思维起很大的作用。好了不走题了。
知道OOP的都知道，在类的里面有一个构造器，在实现类的实例的时候将会初始化这个构造器内的属性值或者调用方法。
但是在Ext中的属性赋值不是“=”而是":"。
上面说的是理论的，实际上过程就是这样。
var grid = new Ext.form.GridPanel();实例化一个类的对象。
{}里面包含的就是传递给这个类的初始化属性值。因为核心代码我还没研究，也没到那份上，所以具体如何传递和实现就不说明了，在以后的Ext学习经验里会说明的。
那将上面的例子扩展一下。
Java代码
复制代码 代码如下:
var grid=new Ext.form.GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: menubar,
bbar: pagingbar,
loadMask: {msg: 数据加载中...'},
layout: 'fit',
autoScroll:true
});
var grid=new Ext.form.GridPanel({
id: 'list-account-panel',
ds: dataStore,
cm: userCM,
sm: selectBoxModel,
tbar: menubar,
bbar: pagingbar,
loadMask: {msg: 数据加载中...'},
layout: 'fit',
autoScroll:true
});
这些是常用的属性，将从这里向其他的部分扩展出去。
这样就申明了一个实力对象并且将其初始化。
你明白了这个过程，如果是真的理解了，只要你熟悉了API .了解到组件的属性和其定义的方法，你可以去创建任何你想要的组件了。如GridPanel.Panel,Tree.其实道理是胡同的。好了，将好这个关键的基础部分，后面的就是属性了，有兴趣的可以继续看。
有些教程里面这里会用到Ext2.2的一个属性el，这个属性是将控件绑定到指定的页面元素中，但是就因为这个el，而将大家的思维固定在了只能绑定在页面元素中了。事实上，有时候要将grid加入tabPanel中的。这个时候就不需要el。有时候创建自己的GridPanel新类并继承GridPanel类。在创建过程中使用ext.applyif方法,讲新类里没有而原有类里有的属性复制过来。这样在调用新类的时候，新类的传递可以传递el这样单独的属性值。我已经建立好一个类的封装。下面会说到我说的这个扩展类的封装。先把grid的基本知识说完。
看看上面说的例子吧，id，是这个Ext组建的唯一id号，在整个项目里面id号要尽可能唯一，这方便自己识别也不容易出其他问题。比如说tabPanel组件的html调用的时候就会出现id问题。
ds，这是设置数据源。
例子具体代码如下：
Java代码
复制代码 代码如下:
dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}});
dataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id:'id'
},[
{name: 'id'},
{name: 'name'},
{name: 'typename'},
{name: 'time'},
])
});
this.dataStore.load({params:{start:0, limit:this.myPageSize}}); 这里要说明的东西很多。。
一个网站上面既然用到了Ext肯定不会是静态的，因为我最多的是于服务器交互而不是直接读取XML文件。所以我这里使用了服务器读取资料的例子。
proxy: new Ext.data.HttpProxy({
url: 'php/article_list.php',
disableCaching:false
})；
这个很简单了啊。一看就明白。HttpProxy这是向本地的文件中传递数据请求。简单点理解就是这样。核心代码没研究，具体操作过程不名。但是作为类。只需要知道怎么用就成了。
但这里有个概念，用到了匿名函数。不能说匿名函数吧。。。怎么说呢。。。
proxy属性是通过一种形式向文件发送请求。。属性赋值可以是已经创建好的实例名，也可以是个以new关键词新建的匿名实例。这样说不知道能否明白。
后面的属性reader是设定这个数据源的数据读取方式。这个例子是用的jsonReader.还可以用ArreyReader。这个看具体需求了。属性值可以是对象也可以是匿名实例对象。好像也可以是方法。没试过，只是个设想。
复制代码 代码如下: