日期:2014-05-16  浏览次数:20327 次

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 深入浅出中的代码吗?呵呵