extjs grid demo

weixin_30879169

于 2019-03-04 22:29:00 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lishupeng/p/10473738.html

本文介绍如何使用ExtJS框架创建用户列表管理界面，包括数据加载、分页、搜索及操作按钮实现。通过Ajax与后端交互，展示用户ID、姓名、账号和密码等信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['id', 'name', 'account', 'password'],
            pageSize: 20,
            remoteSort: false,
            remoteFilter: true,
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'POST'
                },
                url: h.url + '/t/100',
                reader: {
                    type: 'json',
                    root: 'rows',
                    totalProperty: 'total'
                }
            },
            autoLoad: true
        });
        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            title: '用户列表',
            store: store,
            width: 800,
            height: 400,
            margin: 20,
            columns: [
                {text: 'id', dataIndex: 'id'},
                {text: 'name', dataIndex: 'name', flex: 1},
                {text: 'account', dataIndex: 'account'},
                {text: 'password', dataIndex: 'password'}
            ],
            bbar: [
                {
                    xtype: 'pagingtoolbar',
                    store: store,
                    displayMsg: '显示 {0} - {1} 条，共计 {2} 条',
                    emptyMsg: "没有数据",
                    beforePageText: "当前页",
                    afterPageText: "共{0}页",
                    displayInfo: true
                }
            ],
            tbar: [
                {text: '新增', iconCls: 'add', handler: add}, "-",
                {text: '编辑', iconCls: 'edit', handler: edit}, "-",
                {text: '删除', iconCls: 'delete', handler: del}, "-"
            ]
        });
    });