Ext 实现更新列标题和数据,同时满足分组等现实问题

最新推荐文章于 2023-11-06 10:37:02 发布

阳光下的小鱼

最新推荐文章于 2023-11-06 10:37:02 发布

阅读量113

点赞数

文章标签： EXT JavaScript CSS J# HTML ViewUI

本例还有一处没有实现,望大家帮忙,就是更新列和数据后,怎么才能更新分页条里的数据?

我的主要要求实现目标是点击"更换页面内容'"按钮,实现

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[0] = i;
           obj[1] = '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} ({[values.rs.length]} {[values.rs.length > 1 ? "个" : "个"]})'
            }),

     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[0] = i;
             obj[1] = 'name_'+j+"";
             obj[2] = '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>

阳光下的小鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext 实现更新列标题和数据,同时满足分组等现实问题

本例还有一处没有实现,望大家帮忙,就是更新列和数据后,怎么才能更新分页条里的数据?我的主要要求实现目标是点击"更换页面内容'"按钮,实现 1:列增加, 2:数据更新. 3:分页条上的显示也正常.我开始时准备了25条数据,当点击后重置的数据为50条.现在剩下第三条需要攻克一下,望指点一下.&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
复制链接

扫一扫