grid简单实现分页

最新推荐文章于 2022-08-04 18:10:34 发布

原创最新推荐文章于 2022-08-04 18:10:34 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JSP

EXT 专栏收录该内容

4 篇文章

订阅专栏

本文档展示了如何使用ExtJS创建一个包含多种列类型的网格面板，并配置了数据存储及分页工具栏，实现了基本的数据展示功能。

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

var context_store = new Ext.data.Store({
                url: 'context.jsp',
                reader: new Ext.data.JsonReader({
                    root: 'rows',
                    totalProperty: 'results',
                    id: 'contentPK'
                },[
                    'contentPK',
                    'msgPK',
                    'madePersonPK',
                    'madePersonName',
                    'madeDate',
                    'subject',
                    'content',
                    'attachmentNo',
                    'remoteAddr',
                    'personNamesOfNeedReply',
                    'personNamesOfNotReply'
                ])
            });


            var context_grid_v = new Ext.grid.GridPanel({
                title:'回复列表',
                id : 'context-grid',
                //xtype: 'grid',
                frame: false,
                //width:300,
                store: context_store,
                region: 'center',
                columns: [
                    {header: 'ContentPK', dataIndex: 'contentPK',sortable: true},
                    {header: 'msgPK', dataIndex: 'msgPK',sortable: true},
                    {header: '主题', dataIndex: 'subject',sortable: true},
                    {header: '内容', dataIndex: 'content'},
                    {header: '写信人', dataIndex: 'madePersonName'},
                    {header: '写信日期',dataIndex: 'madeDate', sortable: true},
                    {header: 'IP地址', dataIndex: 'remoteAddr'},
                    {header: '收件人(要回)', dataIndex: 'personNamesOfNeedReply'},
                    {header: '收件人', dataIndex: 'personNamesOfNotReply'}
                ],
                stripeRows: true,
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect: true
                }),
                tbar:[' ', '写信日期：'
                    , {
                        xtype: 'datefield'
                    }, ' ',
                    '写信人：',
                    {
                        xtype:'textfield',
                        width:70
                    },' ',{
                        xtype:'button',
                        text:'查询'
                }],
                bbar: new Ext.PagingToolbar({  //分页工具
                    pageSize: 20,
                    store: context_store,
                    displayInfo: true,

                })
            });