`
luciesfly
  • 浏览: 70617 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

Ext 动态添加grid 列数

阅读更多
在做报表的时候,需要将grid的列数做成活的,列数有数据库里的字段确定,这据需要将grid的列数做成动态的,经过多次实验已成,如下:

后台返回的json:

                {'action':true,'message':'error!','data':[
                {'number':'1','text1': '3','info1': '4','special1': '5'}
                ],'columModle':[
                {'header': '序号','dataIndex': 'number','width':40},
                {'header': '编码','dataIndex': 'text1'},
                {'header': '名称','dataIndex': 'info1'},
                {'header': '金额','dataIndex': 'special1'}
                ],'fieldsNames':[{name: 'number'},
                {name: 'text1'}, {name: 'info1'},
                {name: 'special1'}]}

            var cm = new Ext.grid.ColumnModel(json.columModle);
            var ds = new Ext.data.JsonStore({
            data:json.data,
            fields:json.fieldsNames
            });
                                      
            var grid = new Ext.grid.GridPanel({
            region: 'center',
            split: true,
            border:false,
            cm:cm,
            ds:ds
            });
            grid.render(document.body);
          
            new Ext.Viewport({
              layout: 'border',
              split: true,
              items: [grid]
            });


对于Ext动态grid这个问题,好多人都问过我,还有就是如何做多行表头,就是表头有两行以上,其中一列跨下边几列,对于多行表头的问题在这一会半会会说不清楚,只能告诉大家需要自己写插件。咱们还是说说动态表头的问题。
简单的说就是:从后台拼出json字符串--->前台取得字符串,并转化为json----->根据json创建grid
1.从后台拼出json字符串
               “{'action':true,'message':'error!','data':[
                {'number':'1','text1': '3','info1': '4','special1': '5'}
                ],'columModle':[
                {'header': '序号','dataIndex': 'number','width':40},
                {'header': '编码','dataIndex': 'text1'},
                {'header': '名称','dataIndex': 'info1'},
                {'header': '金额','dataIndex': 'special1'}
                ],'fieldsNames':[{name: 'number'},
                {name: 'text1'}, {name: 'info1'},
                {name: 'special1'}]}”
2.前台取得字符串,并转化为json
                               Ext.Ajax.request({
                                url: '自己的url',
                                params: 'method=自己的方法',
                                method: 'POST',
                                success: function(rs,request){
                                    var result = rs.responseText;//拿到结果集,此时为字符串
                                    var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
                                },
                                failure: function(rs,request){
                                }
                            });
3.根据json创建grid
                               Ext.Ajax.request({
                                url: '自己的url',
                                params: 'method=自己的方法',
                                method: 'POST',
                                success: function(rs,request){
                                    var result = rs.responseText;//拿到结果集,此时为字符串
                                    var json = Ext.util.JSON.decode(result);//将字符串转换为json类型
                                    var cm = new Ext.grid.ColumnModel(json.columModle);
                                    var ds = new Ext.data.JsonStore({
                                          data:json.data,
                                          fields:json.fieldsNames
                                        });
                                     
                                    var grid = new Ext.grid.GridPanel({
                                            region: 'center',
                                            split: true,
                                            border:false,
                                            cm:cm,
                                            ds:ds
                                            });
                                   // grid.render(document.body);
         
                                  new Ext.Viewport({
                                          layout: 'border',
                                          split: true,
                                          items: [grid]
                                    });
                                },
                                failure: function(rs,request){
                                }
                            });

注意的地方:首先grid必须在sucsess方法里实例,否则会报错,json数据也只在sucess方法里起作用。Ext的灵魂就是json很多控件都可以用以上方法实现。
分享到:
评论

相关推荐

    一个很好的EXTGRID实例

    2. **列配置**:EXTGRID允许自定义列,包括列宽、标题、对齐方式、可排序性等,可以展示不同类型的数据,如文本、数字、日期等。 3. **分页**:EXTGRID支持分页功能,用户可以轻松浏览大量数据,提高性能。 4. **...

    EXt 可以编辑的grid

    4. **启用CellEditing**:引入EXT JS的CellEditing插件,并将其添加到Grid Panel。通过配置`clicksToEdit`属性,我们可以设定用户需要点击单元格多少次才能启动编辑模式。 5. **监听事件**:为了处理数据的保存,...

    ext--grid--demo

    1. **Ext JS Grid简介**:Ext JS Grid组件提供了一个可配置的表格视图,能够动态地加载和显示大量数据。它由多个部分组成,如Store(存储数据)、Columns(列定义)、Selection Model(选择模型)等。 2. **数据源...

    ext grid 导出excel 代码实例

    1. **创建EXT Grid**:首先,你需要创建一个EXT Grid实例,定义列模型、数据源、以及任何其他必要的配置项。例如,你可以使用`Ext.create('Ext.grid.Panel', { ... })`来创建Grid,并设置`columns`,`store`等属性。...

    ext2.0 grid 分页实例(php)

    Grid是一种用户界面元素,用于显示二维数据,每个数据行对应一个记录,列则代表数据的不同属性。在Ext JS 2.0中,Grid组件提供了丰富的交互性和定制性,如排序、过滤、编辑等功能。 分页机制的实现主要涉及两个部分...

    Extjs动态GRID

    在EXTJS中,动态GRID指的是可以实时调整列宽、列数甚至列结构的网格视图,以适应不同的数据需求和用户界面变化。 1. 动态列创建与删除: EXTJS的Grid Panel支持在运行时动态添加或移除列。这可以通过调用`columns....

    EXTGrid属性方法

    - **reconfigure(Ext.data.Store store, Ext.grid.ColumnModel colModel)**: 重新配置数据存储器和列配置模型,通常用于动态改变表格的数据或列结构。 #### 三、Ext.grid.Column `Ext.grid.Column`代表了表格中的...

    ExtJS笔记---Grid实现后台分页

    在IT行业中,ExtJS是一个广泛使用的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据...在阅读这篇博客时,可以参照给出的"extgrid"文件,查看具体的代码实现,以便更好地理解和学习。

    extgridAPI

    ExtGrid API 提供了丰富的功能,包括数据分页、排序、筛选、编辑以及自定义列等,使得开发人员可以轻松地创建动态、交互式的表格视图。 1. **数据绑定**:ExtGrid API 支持两种主要的数据绑定模式——Store 和 ...

    Extjs4 Grid分页与自动刷新

    var grid = Ext.create('Ext.grid.Panel', { title: '论坛帖子列表', store: store, // 绑定数据存储 columns: [ // 定义列配置 { text: '设备编号', dataIndex: 'deviceno', flex: 1 }, { text: '标题', ...

    Ext 中实现Excel导出

    3. **生成GridPanel**:使用动态添加的列信息创建ColumnModel,进一步创建GridPanel并显示数据。 #### 2.2 Excel导出实现 在Ext中实现Excel导出,可以通过以下几种方式: 1. **导出当前Grid中的数据**:可以利用...

    ExtJS4.0 分享GridHeaderFilters插件

    例如,为数字列添加过滤器: ```javascript { header: 'Age', dataIndex: 'age', filter: { type: 'number' } } ``` 4. **事件监听**: 为了响应用户对过滤器的操作,比如打开、关闭、更改过滤条件,你可以监听...

    ext4 表格分页实例代码

    3. **表格(Grid)**:设置列配置,关联数据模型,并添加到页面布局中。 4. **分页工具栏(Pager)**:添加到Grid下方,与Store关联,自动处理分页逻辑。 在代码实现过程中,需要使用EXT JS的MVC(Model-View-...

    给Extjs的GridPanel增加“合计”行

    - 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...

    ExtJS Filter 实现表格过滤

    - **添加Filter UI**:在列头显示过滤器图标,可以通过`headerMenu`或`menuItems`配置项来控制过滤器菜单的显示。 - **监听Filter事件**:当用户应用过滤条件时,需要监听`filterchange`事件,以便在后台处理数据...

    EXT树表分页(SERVLET)

    在EXT中,树(Tree)和表格(Grid)是两种重要的数据展示组件,它们可以单独使用,也可以结合成树表(TreeGrid)以同时展示层次结构和表格数据。 在EXT树表中,分页(Pagination)是一项关键功能,用于处理大量数据...

    关于EXT分页,分组,排序

    var grid = new Ext.grid.GridPanel({ ... viewConfig: { forceFit: true, enableGroupingMenu: true }, ... }); ``` ### 三、EXTJS 排序 排序是数据展示中非常重要的功能之一,EXTJS 提供了灵活的排序...

    Ext 模仿Excel电子表格

    2. **数据绑定**:Ext JS的数据模型和Store机制允许我们将数据模型与UI组件(如Grid Panel)绑定,实现数据的实时更新,类似于Excel中的动态数据更新。 3. **公式和计算**:Excel的一大特点是其内置的公式和函数...

    extjs grid

    10. **异步加载**:配合`Store`的异步加载机制,Grid可以在需要时动态加载数据,减少初始加载时间。 在IDE如MyEclipse 5.5中开发EXTJS应用,开发者可以利用其内置的JavaScript编辑器和调试工具,提高代码编写和调试...

Global site tag (gtag.js) - Google Analytics