Ext4 Ext.grid.Panel调用reconfigure后如何同时更新bbar导航条

最新推荐文章于 2018-07-12 11:43:25 发布

原创最新推荐文章于 2018-07-12 11:43:25 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext4

JS 专栏收录该内容

38 篇文章

订阅专栏

本文详细介绍了如何在使用 Ext4 的 Ext.grid.Panel 组件时，在调用 reconfigure 方法后同时更新 bbar 导航条。通过创建自定义模型、数据存储和分页组件，实现数据更新时导航条的同步变化。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext4 Ext.grid.Panel调用reconfigure后如何同时更新bbar导航条[API:ext-4.0.7-gpl/docs/source/Paging.html#Ext-toolbar-Paging]</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
    Ext.onReady(function () {
        Ext.define('User1', {
            extend: 'Ext.data.Model',
            fields: ['name', 'addr']
        });
        Ext.define('User2', {
            extend: 'Ext.data.Model',
            fields: ['name', 'addr', 'age', 'sex']
        });
        var store = Ext.create('Ext.data.Store', {
            model: 'User1',
            data: { total: 2, users: [{ name: 'name1', addr: 'addr1' }, { name: 'name2', addr: 'addr2'}] },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'users'
                }
            }
        });
        var pageBar = Ext.create('Ext.PagingToolbar', {
            store: store,
            displayInfo: true,
            displayMsg: '当前显示第 {0} - {1} 条，总共 {2}条',
            emptyMsg: "没有数据"
        });
        var grid = Ext.create('Ext.grid.Panel', {
            store: store,
            width:500,
            columns: [{ dataIndex: 'name' }, { dataIndex: 'addr'}],
            renderTo: document.body,
            bbar: pageBar
        });
        Ext.get('btnRE').on('click', function () {
            reconfigure(grid, pageBar);
        });
    });
    function reconfigure(grid,bar) {
        var store = Ext.create('Ext.data.Store', {
            model: 'User2',
            data: { total: 4, users: [
            { name: 'name1', addr: 'addr1', age: 'age1', sex: 'sex1' },
            { name: 'name2', addr: 'addr2', age: 'age2', sex: 'sex2' },
            { name: 'name3', addr: 'addr3', age: 'age3', sex: 'sex3' },
            { name: 'name4', addr: 'addr4', age: 'age4', sex: 'sex4'}]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'users'
                }
            }
        });
        grid.reconfigure(store, [{ dataIndex: 'name' }, { dataIndex: 'addr' }, { dataIndex: 'age' }, { dataIndex: 'sex'}]);
        var l=gridPanel.getDockedItems();
    for(var i=0;i<l.length;i++){    
        if('pagingtoolbar'==l[i].xtype){
           l[i].bindStore(store3,true);

           l[i].updateInfo();
            l[i].moveFirst();
        }
    }
    }
</script>
</head>
<body>
<input type="button" value="reconfigure" id="btnRE" />
</body>
</html>