论坛首页 → Web前端技术论坛 →

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

浏览 4177 次
锁定老帖子 主题：Ext 实现 更新列标题和数据,同时满足分组等现实问题
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • 01jiangwei01
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 70
  • 来自: 北京
   发表时间：2009-02-17  

 

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

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

   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>

<!---->

<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>

返回顶楼
         
  • ansye
  • 等级: 初级会员
  • 性别:
  • 文章: 2
  • 积分: 30
  • 来自: 上海
   发表时间：2009-02-17   最后修改：2009-02-17
就改了 你的onButtonClick方法就可以用了。
注释掉了 重新生成pagingBar,
添加了一行 pagingBar.bind(dataStore); 
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 ************************************/
//     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 '合计'}
           }
           ]);
 ///////////////////////////////////////////////////////////// 只需要重新绑定一下数据就OK了      
          pagingBar.bind(dataStore); 

          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);
        ///////////////////////////////
    // pagingBar.bind(grid.getStore());   
     // alert("分页条更新为"+data.length+"了没？");
    }


返回顶楼
          回帖地址
0 请登录后投票
  • 01jiangwei01
  • 等级: 初级会员
  • 性别:
  • 文章: 6
  • 积分: 70
  • 来自: 北京
   发表时间：2009-03-25  
谢谢您的帮助！
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics