ExtJS框架学习(一)

        最近因为工作的原因,接触到ExtJS框架(2.0版本),惊为天人.只是使用起来比较复杂，我就把我学习过程中遇到的问题和解决问题的办法晒出来,以便后来人参考,指正和研究.
        因为涉及到数据格式的转换问题,我在这里用的是Newtonsoft.JSON把业务对象转换成字符串.它是个开源的工具,可在网上搜索下载并合法的使用.
        我想程序员最常做的一件事儿,就是把数据从某个数据源中读取出来,放到某个载体上呈现出来.那么,首先我们就用ExtJS来从数据库(Sql server)中读两条数据感受一下.
       首先,做我们最熟悉的事儿,访问数据库,读出几条记录.我们可以选择新建一个aspx页面,但是切记千万要把html元素清理干净,不要留哪怕一丁点儿,然后在Page_Load()中写访问数据库代码(略过不表),然后response.write(json),记得噢,这个字符串json是经过转换的json格式的字符串哦. 查看一下页面，Yeah,成功.呵呵    当然还有更好的办法,那就是新建一个Handler,ashx文件,它可以避免在传送过程中出现html字符,就不详述了。和Page_Load()方法中的代码没有任何区别,只是在ProcessRequest中response. 服务器端的事儿基本做完了。

        然后,回到客户端,添加ExtJS的最小集合,别忘了添加css哦,呵呵:)
        到关键时刻,该写js了。我最讨厌写JS了,但是没办法哎.首先看一段简单的。呵呵，就五行代码,还有三行是大括号,我晕.这个onReady方法告诉我们可以读取页面了,已我现在理解,可以认为是pageload吧.呵呵 此处有点儿问题,onReady函数准确的说是在页面加载结束后进行的，它的执行在pageload之后,所以不能认为是pageload哦。呵呵:)

Ext.onReady(function()
                    {
                             loaddata();
                    }
                )

        然后再看看loaddata()方法,这可是货真价实的噢.

 1            
 2    function loaddata()
 3    {
 4        var cm = new Ext.grid.ColumnModel([
 5            {header:'ItemID',dataIndex:'ItemID',sortable:true},
 6            {header:'UnitPrice',dataIndex:'UnitPrice'},
 7            {header:'ItemName',dataIndex:'ItemName'},
 8            {header:'CategoryID',dataIndex:'CategoryID'},
 9            {header:'PicturePath',dataIndex:'PicturePath'}
10              ]);
11   
12        var store = new Ext.data.Store({
13            url: '../testhandler/Handler.ashx',
14            reader: new Ext.data.JsonReader({
15            id:'ItemID',
16            fields:[   
17               {name:'ItemID'},
18               {name:'UnitPrice'},
19               {name:'ItemName'},
20               {name:'CategoryID'},
21               {name:'PicturePath'}]
22                })
23            });
24            
25    store.load();
26    
27    var grid = new Ext.grid.GridPanel({
28    el: 'grid1',
29    store: store,
30    cm: cm,
31    height:500,
32    width:800
33});
34
35    
36    grid.render(); 
37}

让我们慢慢来看看，这里面究竟有什么奥妙呢?
首先定义了一个cm,它是什么呢?他就是Ext.grid.ColumnModel,Ext提供给我们玩转表格的列模型,可以定义各列排序的功能等等.
然后定义了一个store,它就象一个表,将要展示的数据就放在它的里面.根据我们输入的url去访问一个过程,返回一个字符串(注意这个字符串的格式),然后根据字符串的类型使用相应的reader把他们读出来,还可以设置键值等等其它特性.
OK,终于把数据从数据库中拿过来了。
剩下的就是把这些数据放到grid中就行了。在页面上先定义一个id=grid1的div,然后回来在js中New一个GridPanel就OK了，分别传入id值,数据源,列,及高和宽等等属性.
最后,别忘了store要load(),grid要render()噢,呵呵   让我们看看效果吧.什么?你的有问题,那么写下来吧,看看大家谁能帮忙.