`
01jiangwei01
  • 浏览: 542225 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

EXTJavaScriptCSSJ#HTML 
阅读更多

 

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

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

   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>

分享到：
评论
2 楼 01jiangwei01 2009-03-25  
谢谢您的帮助！
1 楼 ansye 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+"了没？");
    }


发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基于EXT2.0.2表格间数据拖拽

    EXT是一个流行的JavaScript库，特别适用于构建富客户端应用。EXT2.0.2是EXT库的一个较早版本，它提供了一套完整的组件系统，包括...实现这一功能需要对EXT的API有深入的理解，同时也需要熟练掌握JavaScript和DOM操作。

    ext grid数据绑定

    在实际开发中，结合EXT提供的事件监听和自定义插件，你可以实现更加复杂和个性化的数据操作逻辑。 综上所述，EXT Grid数据绑定涉及数据模型、视图和数据源的交互，而数据查找和重填则是数据操作的关键步骤。通过...

    ext三列拖动

    每一列都是一个`Ext.grid.column.Column`实例，包含了列的标题、数据字段和其他属性。 3. 启用拖放：在Grid的配置中，设置`enableColumnMove: true`以开启列拖动。 4. 处理事件：监听`columnmove`事件，当列位置...

    ext 多表头和锁定列结合的示例

    在EXT JS这个强大的JavaScript库中，多表头和锁定列的结合使用是创建复杂、功能丰富的数据展示表格的重要手段。EXT JS允许开发者构建高度自定义的用户界面，尤其是在处理大量数据时，锁定列和多表头功能能显著提高...

    Ext2.0锁定列示例

    在本文中，我们将深入探讨如何在Ext2.0框架中实现Grid列的锁定功能，这是一种在数据展示时保持关键列固定不动，以便用户更轻松地浏览和操作表格数据的技术。Ext是一个强大的JavaScript库，用于构建复杂的Web应用程序...

    Ext 3.4 多表头 列锁定

    1. Locking GridView：这是Ext JS中实现列锁定功能的视图组件，它扩展了标准的GridView，提供了一种方式来分离并锁定左侧的列，同时让右侧的列可滚动。 2. Buffer View：缓冲视图是一种优化性能的技术，特别是当...

    ext动态列

    EXT动态列是一种在EXT JS框架下实现表格列动态生成的技术，它允许我们在运行时根据需求创建或修改表格列。EXT JS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，其组件化的设计使得创建复杂的用户界面变...

    Ext数据模型Store

    Store内部使用了`Ext.util.MixedCollection`数据结构，这使得它可以同时作为映射和列表来操作数据，并在数据变更时触发事件。Store通过与Proxy和DataReader的配合，能够处理来自不同源的数据。 Proxy是数据获取的...

    EXT复杂表头+锁定列例子

    2. 创建EXT Grid实例：定义一个EXT Grid配置对象，包括数据源、列定义、复杂表头配置等。 3. 定义复杂表头：使用嵌套的header配置来创建多级标题。 4. 配置锁定列：指定需要锁定的列，并设置`lockable`和`locked`...

    Ext3.4.0复杂(多行)表头+锁定多列例子

    总的来说，"Ext3.4.0复杂(多行)表头+锁定多列例子"是一个关于如何使用Ext JS创建具有高级功能的数据展示示例，它涉及到了前端开发中的组件化思维、数据绑定、UI设计原则以及用户交互优化等多个方面。理解并掌握这些...

    JSP中使用EXT实现grid table

    2. 分页：EXT Grid可以通过配置Paging Toolbar来实现数据分页，这样用户可以在大量数据中轻松浏览。 3. 排序：Grid中的每一列都可以设置为可排序，用户只需点击列头，即可根据该列数据进行升序或降序排序。 4. ...

    JSP+Ext实现CURD

    在IT行业中，"JSP+Ext实现CURD"是一个常见的开发任务，涉及到Web应用的后端和前端交互，用于数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。JSP（JavaServer Pages）是Java的一种动态网页技术，...

    Ext jsGrid 锁列问题

    用于Ext开发Grid中遇到的所锁列的问题，这个很有帮助

    Ext扩展控件-----可以在代码中动态为表格增加一列或者删除一列

    在实际应用中，你可能还需要处理一些附加的细节，比如保持列的排序顺序、同步Store中的数据结构、更新列宽等。这些可以通过监听Grid的事件，如`columnadd`和`columndrop`，并相应地调整其他相关组件的状态来实现。 ...

    Ext 中实现Excel导出

    根据给定的信息，本文将详细解释如何在Ext框架中实现Excel导出功能。这涉及到从前台界面设计到...通过动态生成GridPanel以及合理地处理数据格式转换、性能优化等问题，可以有效地提升用户体验。希望本文对您有所帮助！

    Ext+JSP实现数据提交

    本篇将详细探讨如何利用`Ext`前端框架与`JSP`服务器端页面来实现数据的提交。 `Ext`是一个强大的JavaScript库，主要用于构建富客户端应用。它提供了丰富的组件库，包括表格、表单、菜单等，以及一套完整的MVC...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    Ext实现的论坛前台代码

    - **数据绑定**：通过数据绑定，界面元素的状态可以自动与后台数据模型同步，实现数据的实时更新。 - **MVC模式**：采用Model-View-Controller架构，分离业务逻辑、视图和数据，方便维护和扩展。 2. **论坛功能...

    Ext表格列锁定+多表头插件

    这个插件主要用于改进Ext Grid的用户体验，特别是处理大量数据时，通过列锁定和多表头功能，使得用户能够更有效地浏览和操作数据。 首先，"列锁定"是Ext Grid中一个非常实用的功能，特别是在显示宽广、多列的数据表...

    ext grid 显示数据

    10. **自定义行为和扩展**: EXT JS Grid允许开发者创建自定义的列类型、行模板、行选择模式等，满足个性化需求。通过继承和扩展EXT JS的API，开发者可以构建功能强大的数据视图。 通过阅读"5_使用Grids显示数据.doc...

Magicbox
Global site tag (gtag.js) - Google Analytics