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>

评论

4 楼 洁宝儿 2011-06-17  

楼主的代码不是Ext 深入浅出中的代码吗？呵呵

3 楼 jiajiafucs 2011-06-03  

这是什么年代的代码？

2 楼 cnyangqi 2011-05-04  

学ExtJS4吧，正式版已经出了，与3差别还是比较大的，刚学的，建议直接学4。

1 楼 liuxuejin 2011-05-03  

不错，我今晚刚刚看书看到这里