zoukankan      html  css  js  c++  java
  • 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中的数据
                })
            })
          
    

      

  • 相关阅读:
    django中使用redis保存session(转)
    Python操作Redis(转)
    Django 中 app_name (应用命名空间) 和 namespace (实例命名空间) 的区别
    零开始Android逆向教程(一)——初探Android逆向
    python基础网络编程--转
    安全建设之平台搭建
    从信息安全弃坑到虚拟化的悲哀和无奈之感
    Apache 性能配置优化
    反爬虫和抗DDOS攻击技术实践
    DockerCon2017前瞻
  • 原文地址:https://www.cnblogs.com/anbylau2130/p/3624312.html
Copyright © 2011-2022 走看看