Ext.js3.4版本学习4

Gird简介
表格由类Ext.gird.GirdPanel定义,继承自Panel,其xtype为Gird。在Ext中表格控件必须包含列定义信息,并指定表格数据存储器Store。
在Ext中列的定义是ColumnModel,作为整个表格的列模型。
创建一个表格:

<script type="text/javascript">
Ext.onReady(function () {
    /* 创建一个包含3列的Grid */
    var cm=new Ext.grid.ColumnModel([
//header:首部显示文本,dataIndex:列对应的记录值字段
        {header:'编号',dataIndex:'id'},
        {header:'名称',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);


    /*   
    表格的列信息还包括
    列是否可排序(sortable)、列的渲染函数(renderer)、宽度(width)、格式化信息(format)等
    */
    //像表中添加数据
    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),
        //proxy:获取数据的方式,MemoryProxy专门解析JavaScript对象
        reader:new Ext.data.ArrayReader({},[ 
        //reader:如何解析数据,ArrayReader专门解析数组
            {name:'id',mapping:0},//mapping用于指定列的顺序
            {name:'name',mapping:1},
            {name:'descn',mapping:2}
        ])
    });
    store.load();//对数据进行初始化

    var grid=new Ext.grid.GridPanel({
        renderTo:'grid',//指示渲染的位置
        height:200,
        store:store,
        cm:cm
    });
});
</script>
<body>
<div id="grid"></div>
</body>

猜你喜欢

转载自blog.csdn.net/qq_35007219/article/details/79066905