因为涉及到数据格式的转换问题,我在这里用的是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()方法,这可是货真价实的噢.
{
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}
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()噢,呵呵 让我们看看效果吧.什么?你的有问题,那么写下来吧,看看大家谁能帮忙.