ExtJs 之GridPanel实例

本文介绍如何使用ExtJS创建一个包含编号、名称和描述的表格。通过定义ColumnModel和Store来展示数据,并演示了如何配置表格组件以实现指定布局。
<div id="grid-div"></div>    
        <script>
            Ext.onReady(function(){ 
                var cm = new Ext.grid.ColumnModel([
                    //设置好表的列头 
                    {header:'编号',dataIndex:'id',sortable:true}, //{首部显示文本,列对应的记录集字段,列是否排序(sortable)}
                    {header:'名称',dataIndex:'name'},
                    {header:'描述',dataIndex:'descn'}
                ]) ;
                var data = [ 
                    ['1','张三','descn1'], 
                    ['2','李四','descn2'], 
                    ['3','王五','descn3'], 
                    ['4','赵六','descn4'], 
                    ['5','孙奇','descn5']
                ] ;
                var ds = new Ext.data.Store({ 
                    proxy:new Ext.data.MemoryProxy(data),//获取数据的方式   (用Ext.data.MemoryProxy专门解析JavaScript变量) 
                    reader:new Ext.data.ArrayReader({},[  //如何解析这堆数据 
                        {name: 'id'}, 
                        {name: 'name'},
                        {name: 'descn'}
                    ]) 
                }) ;//远程读取数据使用ScriptTagProxy  如要从本地读取数据  需要将MemoryProxy改成PagingMemoryProxy 
                ds.load() ;//加载数据 
                var grid = new Ext.grid.GridPanel({ 
                    el:'grid-div',
                    ds: ds, //ds可以把任何格式的数据转化成grid可以使用的形式
                    cm: cm,
                    width:305, 
                    height:133 
                }) ;
                grid.render() ;
            }) ;
                
        </script>

 

转载于:https://www.cnblogs.com/Peter-Youny/archive/2013/02/19/2917026.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值