`
liubl2011
  • 浏览: 237138 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

Extjs3 动态生成grid

阅读更多
由于业务需要,grid列不确定的情况下,动态生成列及添加数据。
基本流程是grid列的数据从后台先取得,然后填充列数据。
代码片段如下:
// 明细标题信息
var cmItems = [];
// 明细标题信息列model
var cm = new Ext.grid.ColumnModel(cmItems);
// 明细record信息
var cmRecord = [];
Ext.Ajax.request({
    url: 'xxxx/xxxxxxTitle',
    method: 'post',
    success: function(response, options){
        var cmtitle = [];
        var cmConfig = {};
        cmtitle = Ext.util.JSON.decode(response.responseText);
        // rowid
        cmConfig = new Ext.grid.RowNumberer()
        cmItems.push(cmConfig);
        // 商品属性
        cmConfig = {
            header: '商品属性',
            dataIndex: 'baccy_attribute',
            width: 100,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_attribute',
            type: 'string',
            mapping: 'baccy_attribute'
        };
        cmRecord.push(cmConfig);
        // 商品编码
        cmConfig = {
            header: '商品编码',
            dataIndex: 'baccy_v3_code',
            width: 100,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_v3_code',
            type: 'string',
            mapping: 'baccy_v3_code'
        };
        cmRecord.push(cmConfig);
        // 商品名称
        cmConfig = {
            header: '商品名称',
            dataIndex: 'baccy_name',
            width: 200,
            sortable: true
        };
        cmItems.push(cmConfig);
        cmConfig = {
            name: 'baccy_name',
            type: 'string',
            mapping: 'baccy_name'
        };
        cmRecord.push(cmConfig);
        //动态添加头信息***************************
        for (var i = 0; i < cmtitle.length; i++) {
            cmConfig = {
                header: cmtitle[i].data,
                dataIndex: cmtitle[i].column,
                width: 120,
                sortable: true
            };
            cmItems.push(cmConfig);
            cmConfig = {
                name: cmtitle[i].column,
                type: 'string',
                mapping: cmtitle[i].column
            };
            cmRecord.push(cmConfig);
        }        
        // id
        cmConfig = {
            name: 'goodsupplyId',
            type: 'string',
            mapping: 'goodsupplyId'
        };
        cmRecord.push(cmConfig);
        cm = new Ext.grid.ColumnModel(cmItems);
        //1.定义明细信息数据结构。
        var list_StudentRecord = Ext.data.Record.create(cmRecord);
        //按列排序。
        cm.defaultSortable = true;
        //2.定义明细list数据结构。
        var list_store = new Ext.data.Store({
            name: 'list_store',
            //设置服务器端映射。传入id作为查询条件。
            proxy: new Ext.data.HttpProxy({
                autoLoad: true,
                url: 'xxxx/xxxxxList'
            }),
            //autoLoad如果有值传入,那么store的load会自动调用,发生在autoLoaded对象创建之后
            //定义数据结构
            reader: new Ext.data.JsonReader({
                totalProperty: 'totalProperty',
                root: 'root'
            }, list_StudentRecord),
            remoteSort: false //True要求服务器提供一个更新版本的数据对象以便排序,反之就是在Record缓存中排序(默认是false)。
        });
        
        //3.定义货源明细信息Grid。
        var list_grid = new Ext.grid.GridPanel({
            id: 'list_grid',
            store: list_store,
            region: 'center',
            loadMask: true,
            height: document.body.clientHeight - 80,
            cm: cm,
            //定义底部信息bar
            bbar: new Ext.PagingToolbar({
                pageSize: 999,
                store: list_store,
                displayInfo: true
            })
        });
        //4画面load之前给变量赋值
        list_store.on('beforeload', function(){
            Ext.apply(this.baseParams, {
                start: 0,
                limit: 999,
                goodsupplyId: baccy_provide_id
            });
        });
        //5.定义明细信息Form。
        var list_form = new Ext.form.FormPanel({
            id: 'list_form',
            labelAlign: 'center',
            frame: true,
            defaultType: 'textfield',
            width: document.body.clientWidth,
            height: document.body.clientHeight - 30,
            items: [list_grid]
        });
        //6.定义明细查询窗口。
        var list_win = new Ext.Window({
            id: 'list-win',
            modal: true, // 模态窗口
            el: 'list-win',
            layout: 'fit',
            
            width: document.body.clientWidth,
            height: document.body.clientHeight,
            title: '显示明细信息',
            closeAction: 'hide',
            items: [list_form],
            buttons: [{
                text: '返回',
                iconCls: 'goBack',
                ref: '../gpBackButton',
                handler: function(){
                    list_win.hide();
                    list_form.getForm().reset();
                }
            }],
            listeners: {
                'show': function(){
                    //window宽和高设定
                    Ext.getCmp('list-win').setWidth(document.body.clientWidth);
                    Ext.getCmp('list-win').setHeight(document.body.clientHeight);
                    //form宽和高设定
                    Ext.getCmp('list_form').setWidth(document.body.clientWidth);
                    Ext.getCmp('list_form').setHeight(document.body.clientHeight - 30);
                    //grid高设定
                    Ext.getCmp('list_grid').setHeight(document.body.clientHeight - 80);
                }
            }
        });
    },
    // 取得货源明细标题信息失败方法。
    failure: function(){
    }
});

后台请求title返回grid头列表,请求list返回和头相对应的列表。
小宝制造。
分享到:
评论

相关推荐

    ExtJs动态grid的生成

    本文将深入探讨如何在ExtJS中动态生成Grid,这是一个非常实用的功能,可以适应不断变化的数据需求和用户交互。我们首先从标题"ExtJs动态grid的生成"开始,了解动态生成Grid的基本概念和实现方法。 动态生成Grid意味...

    Extjs动态Grid的生成 htm

    Extjs动态Grid的生成 htm

    ASP.NET结合EXTJS动态生成Grid列表的例子程序源码

    这个例子程序源码主要展示了如何将两者结合,动态生成Grid列表。 在ASP.NET中,开发者通常使用C#或VB.NET作为后端编程语言,通过ASP.NET MVC或Web Forms模式来处理HTTP请求并返回HTML响应。EXTJS则负责在客户端渲染...

    extjs动态生成表格,前台+后台

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    extjs4.2 动态生成toolbar

    "ExtJS 4.2 动态生成Toolbar" 在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用...

    ASP.NET结合EXTJS动态生成Grid列表的演示

    内容索引:.NET源码,Ajax相关,EXTjs 结合EXTJS类库动态生成Grid数据列表的演示,如果你没有配置数据库信息,那么程序运行时会自动弹出数据安装窗口,安装完成就可以查看演示了,基于EXT风格的Ajax数据列表,简洁实用...

    extjs 实现动态表头

    在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    6. **动态列生成**:根据后台返回的列信息动态创建和配置Grid的列,这通常涉及到解析JSON数据中的列头信息。 7. **优化性能**:考虑使用分页(Paging)和延迟加载(Lazy Loading)来优化大数据量的加载,提高用户...

    extJs3升级extjs4方案

    在 ExtJS 3 里生成表的几个框架组件,ExtJS4 大多生成 div,这使得 CSS classes 将会失败。ExtJS4 已完全重新写 grid 组件,tree 也被更新,所以从版本 3 到 4 大部分的属性改变了。 在 ExtJS4 中,API 也发生了很...

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    ExtJS4 动态生成的grid导出为excel示例

    在ExtJS4中,动态生成的Grid控件是一种常见的数据展示方式,它可以灵活地根据后台数据动态构建列结构。然而,对于这样的Grid,如何将其内容导出为Excel格式可能会成为一个挑战。本文将介绍一个实现这一功能的示例,...

    extjs grid数据导出excel文件

    3. **转换数据**:将Grid数据转换为SheetJS能处理的格式。这包括将数据转换为二维数组,每一行代表一个Grid记录,每一列对应记录的一个字段。 4. **创建并写入工作簿**:利用SheetJS创建一个新的工作簿对象,然后将...

    EXTJS代码生成器

    EXTJS代码生成器是一款专为开发人员设计的工具,它能够自动生成基于EXTJS框架的MVC模式应用程序的代码,显著提升开发效率。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用,提供了丰富的组件库和强大的...

    EXTJS grid导出EXCEL文件

    1. **EXTJS Grid组件**:EXTJS Grid是EXTJS的核心组件之一,它允许开发者创建可分页、可排序、可过滤的数据表格。Grid可以与各种数据源(如JSON、XML或内存中的数组)配合使用,并通过Store对象进行数据的加载和管理...

    Ext 根据数据库返回json动态生成grid列表实例

    在本文中,我们将深入探讨如何使用ExtJS框架根据数据库返回的JSON数据动态生成Grid列表实例。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,尤其是数据可视化和数据管理组件,如Grid。Grid是ExtJS中...

    Extjs tree and Grid(Buffer Grid,Progress Grid)

    3. **Buffer Grid** - 缓冲网格(Buffer Grid)是ExtJS中的优化策略,用于处理大量数据。它只在可视区域加载数据,减少了内存占用和渲染时间,提高滚动性能。 - 这种技术尤其适用于数据量极大的表格,使得用户在...

    ExtJs grid导出Excel

    2. 添加一个按钮或菜单项,当点击时触发Grid的`exportStore`方法,该方法会根据配置的`Exporter`插件生成并下载文件。 3. 在事件处理函数中,调用`grid.getView().getFeatures()[0].exportStore(store, type, ...

    grid动态生成列参考!

    本文将深入探讨如何在ExtJS框架下实现GridPanel的动态列生成,这对于那些需要根据用户操作或数据源变化实时调整列布局的应用场景至关重要。 ### ExtJS GridPanel动态列生成详解 #### 一、背景理解 在ExtJS中,`...

    Extjs Grid 中的 ToolTip效果

    - 对于Grid的列,我们可以使用`Ext.grid.column.Column`的`tooltip`配置项,或者使用`renderer`函数来动态生成Tooltip内容。 2. **配置列的Tooltip**: - 在定义Grid的列模型时,可以直接在列配置对象中设置`...

Global site tag (gtag.js) - Google Analytics