读书人

EXTJS制造一个简单表格的思路

发布时间: 2012-11-05 09:35:12 作者: rapoo

EXTJS制作一个简单表格的思路
1.数据从哪来?
由数据存储器Ext.data.Store定义。它把各种原始数据转换成Ext.data.Record类型的对象数组。
如果把Store看作是一张二维表,那么它的每一行就对应一个Record实例。
定义Store要包含以下两个部分:
a.proxy:获取数据的方式。他是一个DataProxy 对象,定义一个对象,就要看到的构造方法,如果没有构造方法,要看看他的子类。
b.reader:如何解析获取到的数据。他是一个Reader 对象,它的定义思路和proxy的一样
2.怎样显示出来?
要通过列信息显示,Ext.grid.ColumnModel,怎样定义呢?
看一下它的构造方法:ColumnModel ( Mixed config ) ,再看看他的配置项,怎样定义有思路了吧。
3.一切就绪,可以创建一个最基本的表格了。


        <script type="text/javascript">Ext.onReady(function(){    var cm = new Ext.grid.ColumnModel([        {header:'编号',dataIndex:'id'},        {header:'名称',dataIndex:'name'},        {header:'描述',dataIndex:'descn'}    ]);    var data = [        ['1','name1','descn1'],        ['2','name2','descn2'],        ['3','name3','descn3'],        ['4','name4','descn4'],        ['5','name5','descn5']    ];    var store = new Ext.data.Store({        proxy: new Ext.data.MemoryProxy(data),        reader: new Ext.data.ArrayReader({}, [            {name: 'id'},            {name: 'name'},            {name: 'descn'}        ])    });    store.load();    var grid = new Ext.grid.GridPanel({        autoHeight: true,        renderTo: 'grid',        store: store,        cm: cm    });});        </script>
1 楼 liuxuejin 2011-05-03 不错,我今晚刚刚看书看到这里 2 楼 cnyangqi 2011-05-04 学ExtJS4吧,正式版已经出了,与3差别还是比较大的,刚学的,建议直接学4。 3 楼 jiajiafucs 2011-06-03 这是什么年代的代码? 4 楼 洁宝儿 2011-06-17 楼主的代码不是Ext 深入浅出中的代码吗?呵呵

读书人网 >JavaScript

热点推荐