您的位置：首页 > 其它

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

2016-09-18 12:42 525 查看

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

　　本示例通过展示Ext4的Ext.grid.Panel调用reconfigure后如何同时更新gridPanel的bbar导航条，调用reconfigure如果不对bbar进行相关处理，bbar显示的还是上一次的信息，效果如下

初始状态

点击reconfigure重新配置Ext.grid.Panel

测试ext版本4.1.1a和ext-4.2.1.883（一般4+以上版本修改不是很大，4一下的API可能有很大不同），如果是其他版本的ext，请找Ext.PagingToolbar中对应的方法，有可能版本不一样，方法也不一样。

全部源代码如下

－收缩

HTML

代码　　运行代码　　[如果运行无效果，请自行将源代码保存为html文件运行]
<!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导航条</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'}]);

        bar.bindStore(store);

        bar.doRefresh()

    }
</script>
</head>
<body>
<input type="button" value="reconfigure" id="btnRE" />
</body>
</html>

原创文章，转载请注明出处：Ext4 Ext.grid.Panel调用reconfigure后如何同时更新bbar导航条

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航