Extjs动态切换表格

wuzuyu365

于 2018-06-09 22:47:21 发布

阅读量853

点赞数

分类专栏： js extjs

js 同时被 2 个专栏收录

89 篇文章 1 订阅

订阅专栏

extjs

33 篇文章 1 订阅

订阅专栏

注意把下面your_path替换成你的Extjs的目录

<!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="/your_path/ExtJS/resources/css/ext-all.css"/>
     <script type="text/javascript" src="/your_path/ExtJS/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: [{header: '名字', dataIndex: 'name'},
                    {header: '地址', 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, [
                {
                    header: '名字',
                    dataIndex: 'name'
                }, {
                    header: '地址',
                    dataIndex: 'addr'
                }, {
                    header: '年龄',
                    dataIndex: 'age'
                }, {
                    header: '性别',
                    dataIndex: 'sex'
                }]);
            bar.bindStore(store);
            bar.doRefresh()
        }
    </script>
</head>
<body>
<br/>
<input type="button" value="reconfigure" id="btnRE"/>
<br/>

</body>
</html>