Ext本地数据在Grid中分页显示，隐藏指定字段

最新推荐文章于 2020-05-07 00:42:05 发布

hustchenshu

最新推荐文章于 2020-05-07 00:42:05 发布

阅读量2.2k

点赞数

分类专栏： EXT 文章标签： ext gird 前台数据分页显示隐藏字段

本文链接：https://blog.csdn.net/dujiajiyiyi/article/details/51281766

版权

EXT 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在已经从后台取得数据data后者前台数据量很大的data时，需要在前台进行分页显示

var data = []//已经取得的数据
var fields= []//grid的store的fields

var hearder =[]//grid的columns属性
Ext.define('Mygrid', {
    extend: 'Ext.grid.Panel',
    constructor: function () {
        // 每页的条目数量
        var userPerPage = 22;
       //默认加载参数
        var baseParams = {
            start: 0,
            limit: userPerPage
        }
        //定义数据源
        var userstore = Ext.create('Ext.data.Store', {
            //data: data,
            fields:fields,
            baseParams: baseParams,
            autoLoad: false,
            pageSize: userPerPage, // 每页的条目数量
            proxy:new Ext.data.MemoryProxy({  enablePaging: true,data: data, reader: { type: 'json' } })
        });//默认加载第一页数据
        var pagingToolbar = new Ext.PagingToolbar({
            store: userstore.load({ params: baseParams }),
            autoLoad: false,
            displayInfo: true
        });
        Ext.apply(this, {
            split: true,
            columnLines:true,
            columns: header,
            store: userstore.load({ params: baseParams }),
            height: '100%',
            width: '100%',
            closable: true,
            autoScroll: true,
            bbar:pagingToolbar,
            listeners: {
                afterrender: function () {
                    //隐藏制定字段，并设置字段在表格中的宽度自适应
                    Ext.each(this.columns, function (column) {
                        //宽度自适应
                        column.setWidth(column.text.length * 30 + 10);
                        if (column.dataIndex == '指定列名')
                            column.hide();
                    })
                }
            }
        });
        this.callParent(arguments);
    }
})