Ext3.4--Gridpanel

   Ext.onReady(function () {

            var sm = new Ext.grid.RowSelectionModel({singleSelect:true})//设置单选
            //var sm = new Ext.grid.CheckboxSelectionModel();//设置多选
            var cm = new Ext.grid.ColumnModel([
                                               new Ext.grid.RowNumberer(), //显示行号   
                                               sm,
                                               { header: "id", dataIndex: "id", sortable: true/*允许排序*/ },
                                               { header: "name", dataIndex: "name" },
                                               { header: "score", dataIndex: "score", render: function (value) {
                                                   if (value > 100) {
                                                       console.dir(value);
                                                       return "<span style='color:red'>优秀</span>";
                                                   } else {
                                                       return "<span style='color:green'>不及格</span>";
                                                   }
                                               }
                                               },
                                               { header: "date", dataIndex: 'date', type: 'data', render: Ext.util.Format.dateRenderer('Y年m月d日') }
                                               ])/*显示日期数据允许排序*/;

            var data = [['1', 'lilei', 100, '1970-01-15T02:58:04'],
            ['2', 'hanmeimei', 60, '1970-01-15T02:58:04'],
            ['3', 'john', 95, '1970-01-15T02:58:04']
            ];

            var store = new Ext.data.Store({    //Ext.data.Store创建一个存储对象,store负责把各种各样的数据(array,json)转换成Ext.data.Record
                proxy: new Ext.data.MemoryProxy(data), //定义代理
                reader: new Ext.data.ArrayReader({}, [   //Ext.data.ArrayReader用来解析数组
                        {name: 'id' },    //这里可以使用mapping来指定数据的位置,如果想把数组中的第2个元素映射成id,mapping:1
                        {name: 'name' },
                        { name: 'score' },
                        { name: 'date', type: 'date', dateFormat: 'Y-m-dTH:i:s' }
                ]),
                sortInfo: { field: 'name', direction: 'ASC'}  //解决中文排序
            });
            store.load();
            var grid = new Ext.grid.GridPanel({
                height: 500,
                enableColumnMove: false,
                enableColumnResize: false,  //是否允许调整列宽
                stripeRows: true,   //是否显示斑马纹
                renderTo: Ext.getBody(),
                store: store,
                cm: cm,
                sm: sm,
                viewConfig: { forceFit: true }, //列宽自适应
                autoExpandColumn: 'id'  //让指定的列自动伸展,如果宽度不够用,那么自动加宽
            })
            Ext.get("remove").on('click', function () {
                store.remove(store.getAt(1))//删除store中的数据
            })
        })
      

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值