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

      

  • 相关阅读:
    vscode设置js文件自动格式化单引号
    解决git每次输入账号密码问题
    vscode设置vouter标签不换行
    查看修改npm地址并登录
    正则匹配[]外部的内容
    使用v-model实现父子组件之间传值
    发布网站
    安装IIS
    IIS服务添加角色
    react生命周期
  • 原文地址:https://www.cnblogs.com/anbylau2130/p/3624312.html
Copyright © 2011-2022 走看看