一聚教程网:一个值得你收藏的教程网站

热门教程

exjs4中 翻页控件升级用法

时间:2022-06-25 18:30:14 编辑:袖梨 来源:一聚教程网

 代码如下 复制代码
plugins: Ext.create('Ext.ux.SlidingPager', {})

 代码如下 复制代码
plugins: Ext.create('Ext.ux.ProgressBarPager', {})

完整的代码:

 代码如下 复制代码

[Js]
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '/ExtJs/ux');
//Ext.Loader.setPath('Ext.ux.DataView', '/ExtJs/ux/DataView');

Ext.onReady(function () {

    var store = Ext.create('Ext.data.Store', {
        fields: ['IntData', 'StringData', 'TimeData'],
        pageSize: 15,
        proxy: {
            type: 'ajax',
            url: 'PagingToolbar1Json',
            reader: {
                type: 'json',
                root: 'rows',
                totalProperty: 'results'
            }
        },
        autoLoad: true
    });

    var tpl = new Ext.XTemplate(
        '

',
        '',
        '消息',
        '',
            '
',
        '',
        '
Ext.view.View取自服务端的数据表
编号日期
{IntData}{StringData}{TimeData}
'
    );

    var panel = Ext.create('Ext.Panel', {
        renderTo: "div1",
        frame: true,
        width: 535,
        autoHeight: true,
        collapsible: true,
        layout: 'fit',
        title: '分页控件用在View',
        items: Ext.create('Ext.view.View', {
            store: store,
            tpl: tpl,
            autoHeight: true,
            multiSelect: true,
            id: 'view1',
            overItemCls: 'hover',
            itemSelector: 'tr.data',
            emptyText: '没有数据',
            plugins: [
                Ext.create('Ext.ux.DataView.DragSelector', {}),
                Ext.create('Ext.ux.DataView.LabelEditor', { dataIndex: 'IntData' })
            ]
        }),
        bbar: Ext.create('Ext.toolbar.Paging', {
            store: store,
            displayInfo: true,
            items: [
                '-', {
                    text: '第10页',
                    handler: function () {
                        store.loadPage(10);
                    }
                }],
            plugins: Ext.create('Ext.ux.SlidingPager', {})
            //plugins: Ext.create('Ext.ux.ProgressBarPager', {})
        })
    });
});

热门栏目