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()方法,这可是货真价实的噢.

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

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

store.load();
26

var grid = new Ext.grid.GridPanel({
28

el: 'grid1',
29

store: store,
30

cm: cm,
31

height:500,
32

width:800
33

});
34

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()噢,呵呵让我们看看效果吧.什么?你的有问题,那么写下来吧,看看大家谁能帮忙.

Tag标签: Ext2.0

posted on 2008-03-26 13:47 GodSpeed 阅读(536) 评论(1) 编辑收藏

#1楼  2008-04-08 23:54 蓝奇高级验证码识别引擎QQ:631753663 [未注册用户]

出售蓝奇高级验证码识别引擎，可准确识别新浪动网淘宝CSDN等多种复杂验证码。

输出为一个标准DLL，可供VB,VC,Delphi,C#.NET,VB.NET,模拟精灵,按键精灵等多平台调用，调用方法简单，几行代码即可完成。独具特色的边缘检测字符分离、旋转倾斜纠正和通用字符匹配算法（无论字体和大小），使得该引擎对于像新浪、动网、淘宝、CSDN等多种验证码均有不错的识别率，是一款效果较为理想的验证码识别引擎。附详细的调用实例和代码注释等相关技术文档。

官方网站 - http://***/yzm_advocr
识别效果怎么样一试就知道 - DEMO下载 http://***/yzm_advocr/advocr.rar
回复引用