Ext 实现 更新列标题和数据,同时满足分组等现实问题
本例还有一处没有实现,望大家帮忙,就是更新列和数据后,怎么才能更新分页条里的数据?
我的主要要求实现目标是点击"更换页面内容'"按钮,实现
1:列增加,
2:数据更新.
3:分页条上的显示也正常.
我开始时准备了25条数据,当点击后重置的数据为50条.现在剩下第三条需要攻克一下,望指点一下.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>grid_changeClolumn_and_data.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="../ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../PagingMemoryProxy.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var xg = Ext.grid;
var data = [];
var obj = [];
for(var j = 1 ;j<=5;j++)//25条数据
{
for( var i = 1;i<=5;i++)
{
obj = [];
obj = i;
obj = 'name_'+j+"-";
data.push(obj);
}
}
var reader = new Ext.data.ArrayReader({}, [
{name: '编号'},
{name: '名称'}
])
var dataStore = new Ext.data.GroupingStore({
reader: reader,
proxy: new Ext.data.PagingMemoryProxy(data),
sortInfo:{field: '名称', direction: "ASC"},
groupField:'名称'//按什么分组
});
var cm = [//列模式
{
header: '编号', width: 260,sortable: true, dataIndex: '编号'
//,summaryRenderer:function(){return '合计'}
},
{
header: '名称', width: 240,sortable: true, dataIndex: '名称'
//,summaryRenderer:function(){return '合计'}
}];
var pagingBar = new Ext.PagingToolbar({
pageSize: 10,
store: dataStore,
displayInfo: true
});
var toolMenu = new Ext.Toolbar.Button({
text: '更换页面内容',
handler: onButtonClick
});
var grid = new xg.GridPanel({
store: dataStore,
columns:cm,
view: new Ext.grid.GroupingView({
forceFit:false,
// hideGroupedColumn: true, 用上后样式发生问题
enableRowBody:true,
groupTextTpl: '{text} ({} {})'
}),
tbar:['-',toolMenu,'-'],
bbar: pagingBar,
frame:true,
width: 800,
height: 500,
border:true,
title:"测试表",
loadMask:true,
collapsible: true,
animCollapse:false,
trackMouseOver: false
});
grid.render(document.body);
grid.store.load({params:{start:0, limit:10}});
function onButtonClick()
{
data = [];
for(var j = 1 ;j<=10;j++)//50条数据
{
for( var i = 1;i<=5;i++)
{
obj = [];
obj = i;
obj = 'name_'+j+"";
obj = 'score_'+j
data.push(obj);
}
}
reader = new Ext.data.ArrayReader({}, [
{name: '编号'},
{name: '名称'},
{name: '成绩'}
]);
dataStore = new Ext.data.GroupingStore({
reader: reader,
proxy: new Ext.data.PagingMemoryProxy(data),
sortInfo:{field: '名称', direction: "ASC"},
groupField:'名称'//按什么分组
});
pagingBar = new Ext.PagingToolbar({
pageSize: 10,
store: dataStore,
displayInfo: true
});
var cm = new Ext.grid.ColumnModel([//列模式
{
header: '编号', width: 260,sortable: true, dataIndex: '编号'
//,summaryRenderer:function(){return '合计'}
},
{
header: '名称', width: 240,sortable: true, dataIndex: '名称'
//,summaryRenderer:function(){return '合计'}
},{
header: '成绩', width: 240,sortable: true, dataIndex: '成绩'
//,summaryRenderer:function(){return '合计'}
}
]);
grid.reconfigure(dataStore,cm);///更新数据
grid.setTitle("测试版本更新后");
//alert(grid.getBottomToolbar().pageSize);
//grid.getStore().proxy = new Ext.data.PagingMemoryProxy(data);
//grid.getStore().load();
//grid.getBottomToolbar().store = dataStore;
//grid.store().load({params:{start:0, limit:10}});
dataStore.load({params:{start:0, limit:10}});
grid.render(document.body);
///////////////////////////////
alert("分页条更新为"+data.length+"了没？");
}
});
</script>
</html>
<!----><noscript src="/admin/ext-base.js" type="text/javascript"></noscript><noscript src="/admin/ext-all.js" type="text/javascript"></noscript><noscript src="/admin/ext-lang-zh_CN.js" type="text/javascript"></noscript><noscript src="/admin/PagingMemoryProxy.js" type="text/javascript"></noscript><noscript type="text/javascript"><!----></noscript>
页:
[1]