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中的数据
            })
        })
      

  

posted @ 2014-03-25 22:01  尼姑哪里跑  阅读(1575)  评论(0)    收藏  举报