<!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>
Ext4 Ext.grid.Panel調用reconfigure後如何同時更新bbar導航條
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.