行編集が有効になっている ExtJS 4.2 グリッドの次のコードがあります。ただし、[追加] ボタンは、新しい行が追加されたときにグリッドの下部にあるページングを更新しません。これを達成する方法はありますか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Tra nsitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Branch Awards</title>
<link rel="stylesheet" type="text/css" href="./ext-4.2.0.663/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./ext4.2.0.663/resources/css/ext-all-slate.css" />
<link rel="stylesheet" type="text/css" href="./ext-4.2.0.663/examples/shared/example.css" />
<script type="text/javascript" src="./ext-4.2.0.663/ext-all.js"></script>
<!--
HTML Multiline comment.
-->
<script type="text/javascript">
Ext.onReady(function()
{
Ext.define('Award', {
extend: 'Ext.data.Model',
fields: [
{name: 'branch_id', type:'int'},
'cost_centre',
'branch_name',
'top_60',
'top_30',
'top_10',
{name: 'amount', type: 'float'}
]
});
var Awards = Ext.create('Ext.data.Store', {
model: 'Award',
autoLoad: true,
autoSync: true,
pageSize: 20,
remoteSort: true,
proxy: {
type: 'ajax',
api: {
read: 'award_view.php',
create: 'award_create.php',
update: 'award_update.php',
destroy: 'award_delete.php'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
encode: false,
root: 'data'
},
listeners: {
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'ERROR',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
var rowEditor = Ext.create('Ext.grid.plugin.RowEditing', {clicksToEdit: 2});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
frame: true,
store: Awards,
width: 550,
height: 350,
title: 'Branch Awards',
selType: 'rowmodel',
columns: [{
text: 'Cost Centre',
flex: 2,
dataIndex: 'cost_centre',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Branch',
flex: 5,
dataIndex: 'branch_name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Top 60',
flex: 1,
dataIndex: 'top_60',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Top 30',
flex: 1,
dataIndex: 'top_30',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Top 10',
flex: 1,
dataIndex: 'top_10',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
text: 'Amount',
flex: 2,
dataIndex: 'amount',
editor: {
xtype: 'textfield',
allowBlank: false
}
}
],
plugins: rowEditor,
dockedItems: [
{
xtype: 'toolbar',
items: [
{
text: 'Add',
handler: function() {
rowEditor.cancelEdit();
// Create a record instance through the ModelManager
var r = Ext.ModelManager.create({
cost_centre: '000',
branch_name: 'New Branch',
top_60: 'N',
top_30: 'N',
top_10: 'N',
amount: 0
}, 'Award');
Awards.insert(0, r);
rowEditor.startEdit(0, 0);
}
},
{
text: 'Delete',
handler: function() {
var sm = grid.getSelectionModel();
rowEditor.cancelEdit();
Awards.remove(sm.getSelection());
if (Awards.getCount() > 0) {sm.select(0);}
}
}
]
}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: Awards,
displayInfo: true,
displayMsg: 'Displaying records {0} - {1} of {2}',
emptyMsg: "No records to display"
})
});
});
</script>
</head>
<body>
</body>
</html>