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中对应的方法,有可能版本不一样,方法也不一样。
全部源代码如下
<!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导航条