extjs 构建gridpanel多表头

最新推荐文章于 2016-03-12 10:16:48 发布
最新推荐文章于 2016-03-12 10:16:48 发布
阅读量192 收藏
点赞数
文章标签： ux
原文链接：http://www.cnblogs.com/angus332770349/archive/2012/05/23/2514261.html
版权

1.先引用相应的js和css文件

2.定义数组和临时变量（全局）

var cmItems = [];
var cmConfig;
var continentGroupRow = [];

3.主页面板为上下布局时

        //主面板
        var viewport = new Ext.Viewport({
            layout: 'border',
            id: 'divCenterPanel',
            items: [
                    {
                        region: 'center',
                        layout: 'fit',
                        items: [panGrid]//这里panGrid是panel
                    }, {
                        region: 'north',
                        layout: 'fit',
                        height: 110,
                        items: [pnForm]
                    }
                ]
        });

4.画面初始状态可以根据需要定义store或column

       //定义Store初始化状态
        var storeAccountList = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({ url: '...', method: "post", async: true }),
            reader: new Ext.data.XmlReader(
            {
                totalProperty: 'totalRecords',
                record: 'row'
            },
            [
                { name: 'ITEMSERIAL' }, { name: 'ITEMSERIALNAME' }, { name: 'CPXNAME' }, { name: 'PQTY' }, { name: 'SQTY' }, { name: 'IQTY' },
                { name: 'GRNQTY1' }, { name: 'GRNAMOUNT1' }, { name: 'SALESQTY1' },{ name: 'SALESAMOUNT1' }, 
                { name: 'BUDGETQTY1' }, { name: 'BUDGETAMOUNT1' },{ name: 'INVENTORYQTY1' },{ name: 'INVENTORYAMOUNT1' },
                { name: 'GRNQTY2' }, { name: 'GRNAMOUNT2' }, { name: 'SALESQTY2' },{ name: 'SALESAMOUNT2' }, 
                { name: 'BUDGETQTY2' }, { name: 'BUDGETAMOUNT2' },{ name: 'INVENTORYQTY2' },{ name: 'INVENTORYAMOUNT2' },
                { name: 'GRNQTY3' }, { name: 'GRNAMOUNT3' }, { name: 'SALESQTY3' },{ name: 'SALESAMOUNT3' }, 
                { name: 'BUDGETQTY3' }, { name: 'BUDGETAMOUNT3' },{ name: 'INVENTORYQTY3' },{ name: 'INVENTORYAMOUNT3' },
                { name: 'GRNQTY4' }, { name: 'GRNAMOUNT4' }, { name: 'SALESQTY4' },{ name: 'SALESAMOUNT4' }, 
                { name: 'BUDGETQTY4' }, { name: 'BUDGETAMOUNT4' },{ name: 'INVENTORYQTY4' },{ name: 'INVENTORYAMOUNT4' },
                { name: 'GRNQTY5' }, { name: 'GRNAMOUNT5' }, { name: 'SALESQTY5' },{ name: 'SALESAMOUNT5' }, 
                { name: 'BUDGETQTY5' }, { name: 'BUDGETAMOUNT5' },{ name: 'INVENTORYQTY5' },{ name: 'INVENTORYAMOUNT5' },
                { name: 'GRNQTY6' }, { name: 'GRNAMOUNT6' }, { name: 'SALESQTY6' },{ name: 'SALESAMOUNT6' }, 
                { name: 'BUDGETQTY6' }, { name: 'BUDGETAMOUNT6' },{ name: 'INVENTORYQTY6' },{ name: 'INVENTORYAMOUNT6' },
                { name: 'GRNQTY7' }, { name: 'GRNAMOUNT7' }, { name: 'SALESQTY7' },{ name: 'SALESAMOUNT7' }, 
                { name: 'BUDGETQTY7' }, { name: 'BUDGETAMOUNT7' },{ name: 'INVENTORYQTY7' },{ name: 'INVENTORYAMOUNT7' },
                { name: 'GRNQTY8' }, { name: 'GRNAMOUNT8' }, { name: 'SALESQTY8' },{ name: 'SALESAMOUNT8' }, 
                { name: 'BUDGETQTY8' }, { name: 'BUDGETAMOUNT8' },{ name: 'INVENTORYQTY8' },{ name: 'INVENTORYAMOUNT8' },
                { name: 'GRNQTY9' }, { name: 'GRNAMOUNT9' }, { name: 'SALESQTY9' },{ name: 'SALESAMOUNT9' }, 
                { name: 'BUDGETQTY9' }, { name: 'BUDGETAMOUNT9' },{ name: 'INVENTORYQTY9' },{ name: 'INVENTORYAMOUNT9' },
                { name: 'GRNQTY10' }, { name: 'GRNAMOUNT10' }, { name: 'SALESQTY10' },{ name: 'SALESAMOUNT10' }, 
                { name: 'BUDGETQTY10' }, { name: 'BUDGETAMOUNT10' },{ name: 'INVENTORYQTY10' },{ name: 'INVENTORYAMOUNT10' },
                { name: 'GRNQTY11' }, { name: 'GRNAMOUNT11' }, { name: 'SALESQTY11' },{ name: 'SALESAMOUNT11' }, 
                { name: 'BUDGETQTY11' }, { name: 'BUDGETAMOUNT11' },{ name: 'INVENTORYQTY11' },{ name: 'INVENTORYAMOUNT11' },
                { name: 'GRNQTY12' }, { name: 'GRNAMOUNT12' }, { name: 'SALESQTY12' },{ name: 'SALESAMOUNT12' }, 
                { name: 'BUDGETQTY12' }, { name: 'BUDGETAMOUNT12' },{ name: 'INVENTORYQTY12' },{ name: 'INVENTORYAMOUNT12' }
            ]
         )
        });


        var sm = new Ext.grid.CellSelectionModel({
            singleSelect: true
        });


        var cm = new Ext.grid.ColumnModel(cmItems);//添加的全局变量column

        var gridArray = new Ext.grid.EditorGridPanel({
            cm: cm,
            sm: sm,
            store: storeAccountList,
            id: 'gridArray',
            loadMask: true
        });

        var panGrid = new Ext.Panel({
            region: 'center',
            layout: 'fit',
            items: [gridArray]
        });

        var btnSearch = new Ext.Button({
            text: '搜索', //搜索
            iconCls: 'icon_search',
            handler: function() {

                //点击搜索调用构建的方法
            }
        });

5.构建方法

            storeAccountList.removeAll(); //先将store清空
           //加载store
            storeAccountList = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({ url: '.....', method: "post", async: true }),
                reader: new Ext.data.XmlReader(
                {
                    totalProperty: 'totalRecords',
                    record: 'row'
                },
                [
                    { name: 'ITEMSERIAL' }, { name: 'ITEMSERIALNAME' }, { name: 'CPXNAME' }, { name: 'PQTY' }, { name: 'SQTY' }, { name: 'IQTY' },
                    { name: 'GRNQTY1' }, { name: 'GRNAMOUNT1' }, { name: 'SALESQTY1' },{ name: 'SALESAMOUNT1' }, 
                    { name: 'BUDGETQTY1' }, { name: 'BUDGETAMOUNT1' },{ name: 'INVENTORYQTY1' },{ name: 'INVENTORYAMOUNT1' },
                    { name: 'GRNQTY2' }, { name: 'GRNAMOUNT2' }, { name: 'SALESQTY2' },{ name: 'SALESAMOUNT2' }, 
                    { name: 'BUDGETQTY2' }, { name: 'BUDGETAMOUNT2' },{ name: 'INVENTORYQTY2' },{ name: 'INVENTORYAMOUNT2' },
                    { name: 'GRNQTY3' }, { name: 'GRNAMOUNT3' }, { name: 'SALESQTY3' },{ name: 'SALESAMOUNT3' }, 
                    { name: 'BUDGETQTY3' }, { name: 'BUDGETAMOUNT3' },{ name: 'INVENTORYQTY3' },{ name: 'INVENTORYAMOUNT3' },
                    { name: 'GRNQTY4' }, { name: 'GRNAMOUNT4' }, { name: 'SALESQTY4' },{ name: 'SALESAMOUNT4' }, 
                    { name: 'BUDGETQTY4' }, { name: 'BUDGETAMOUNT4' },{ name: 'INVENTORYQTY4' },{ name: 'INVENTORYAMOUNT4' },
                    { name: 'GRNQTY5' }, { name: 'GRNAMOUNT5' }, { name: 'SALESQTY5' },{ name: 'SALESAMOUNT5' }, 
                    { name: 'BUDGETQTY5' }, { name: 'BUDGETAMOUNT5' },{ name: 'INVENTORYQTY5' },{ name: 'INVENTORYAMOUNT5' },
                    { name: 'GRNQTY6' }, { name: 'GRNAMOUNT6' }, { name: 'SALESQTY6' },{ name: 'SALESAMOUNT6' }, 
                    { name: 'BUDGETQTY6' }, { name: 'BUDGETAMOUNT6' },{ name: 'INVENTORYQTY6' },{ name: 'INVENTORYAMOUNT6' },
                    { name: 'GRNQTY7' }, { name: 'GRNAMOUNT7' }, { name: 'SALESQTY7' },{ name: 'SALESAMOUNT7' }, 
                    { name: 'BUDGETQTY7' }, { name: 'BUDGETAMOUNT7' },{ name: 'INVENTORYQTY7' },{ name: 'INVENTORYAMOUNT7' },
                    { name: 'GRNQTY8' }, { name: 'GRNAMOUNT8' }, { name: 'SALESQTY8' },{ name: 'SALESAMOUNT8' }, 
                    { name: 'BUDGETQTY8' }, { name: 'BUDGETAMOUNT8' },{ name: 'INVENTORYQTY8' },{ name: 'INVENTORYAMOUNT8' },
                    { name: 'GRNQTY9' }, { name: 'GRNAMOUNT9' }, { name: 'SALESQTY9' },{ name: 'SALESAMOUNT9' }, 
                    { name: 'BUDGETQTY9' }, { name: 'BUDGETAMOUNT9' },{ name: 'INVENTORYQTY9' },{ name: 'INVENTORYAMOUNT9' },
                    { name: 'GRNQTY10' }, { name: 'GRNAMOUNT10' }, { name: 'SALESQTY10' },{ name: 'SALESAMOUNT10' }, 
                    { name: 'BUDGETQTY10' }, { name: 'BUDGETAMOUNT10' },{ name: 'INVENTORYQTY10' },{ name: 'INVENTORYAMOUNT10' },
                    { name: 'GRNQTY11' }, { name: 'GRNAMOUNT11' }, { name: 'SALESQTY11' },{ name: 'SALESAMOUNT11' }, 
                    { name: 'BUDGETQTY11' }, { name: 'BUDGETAMOUNT11' },{ name: 'INVENTORYQTY11' },{ name: 'INVENTORYAMOUNT11' },
                    { name: 'GRNQTY12' }, { name: 'GRNAMOUNT12' }, { name: 'SALESQTY12' },{ name: 'SALESAMOUNT12' }, 
                    { name: 'BUDGETQTY12' }, { name: 'BUDGETAMOUNT12' },{ name: 'INVENTORYQTY12' },{ name: 'INVENTORYAMOUNT12' }
                ]
                )
            });


            panGrid.removeAll(true);//将panel中的gridpanel从panel中移除

           
           //清空数组
            cmItems.clear();
            continentGroupRow.clear();
           //添加列
            cmConfig = { header: '产品线', dataIndex: 'CPXNAME', width: 120, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: '统驭产品', dataIndex: 'ITEMSERIAL', width: 120, sortable: true }
            cmItems.push(cmConfig);
            continentGroupRow.push({
                header: ' ',
                align: 'center',
                colspan: 2
            });
            cmConfig = { header: 'P', dataIndex: 'PQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: 'S', dataIndex: 'SQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            cmConfig = { header: 'I', dataIndex: 'IQTY', width: 70, sortable: true }
            cmItems.push(cmConfig);
            continentGroupRow.push({
                header: txtYear.getValue()-1,
                align: 'center',
                colspan: 3
            });
            for (var i = 1; i <= 12; i++) {
                cmConfig = { header: 'GRN(QTY)', dataIndex: 'GRNQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'GRN(AMT)', dataIndex: 'GRNAMOUNT' + i, width: 120, sortable: true, renderer: doit }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sales Actual(QTY)', dataIndex: 'SALESQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sales Actual(AMT)', dataIndex: 'SALESAMOUNT' + i, width: 120, sortable: true, renderer: doit }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sale Budget(QTY)', dataIndex: 'BUDGETQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Sale Budget(AMT)', dataIndex: 'BUDGETAMOUNT' + i, width: 120, sortable: true , renderer: doit}
                cmItems.push(cmConfig);
                cmConfig = { header: 'Inventory(QTY)', dataIndex: 'INVENTORYQTY' + i, width: 120, sortable: true }
                cmItems.push(cmConfig);
                cmConfig = { header: 'Inventory(AMT)', dataIndex: 'INVENTORYAMOUNT' + i, width: 120, sortable: true , renderer: doit}
                cmItems.push(cmConfig);
                continentGroupRow.push({
                    header: txtYear.getValue() + '-' + i,
                    align: 'center',
                    colspan: 8
                });
            }
            var tcm = new Ext.grid.ColumnModel(cmItems);
           //列头分组
            var group = new Ext.ux.grid.ColumnHeaderGroup({
                rows: [continentGroupRow]
            });
           //从新创建GridPanel（不用申明新的gridArray 变量） 
            gridArray = new Ext.grid.EditorGridPanel({
                cm: tcm,
                sm: sm,
                autoScroll: true,
                store: storeAccountList,
                enableColumnMove: false, //不允许拖动列
                enableHdMenu: false, //隐藏下拉菜单
                id: 'gridArray',
                loadMask: true,
                plugins: group
            });
           //将创建好的GridPanel重新插入到panel中
            panGrid.insert(0, gridArray);
           //显示
            panGrid.doLayout();
            //最后根据条件加载store
            storeAccountList.load({ params: { YEAR: txtYear.getValue(), ITEM_CLASS: cboJXClass.getValue(), MODETYPE: rdoModeType.getValue().inputValue} });

 

转载于:https://www.cnblogs.com/angus332770349/archive/2012/05/23/2514261.html

weixin_30394333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Gridpanel多表头的扩展
12-03
针对Gridpanel多表头的扩展，适用于2.2的ext版本，3以上的没有测试过，有兴趣的可以自己研究研究。
Ext.gridpanel 锁列与多表头合并
xie2910的博客
05-06 396
如果要实现EXT Gridpanel的锁列和多表头整合一起使用，有点难度！因为它们是两个不同的扩展组件。 目前我有一个做法，效果我已经上传。就是用两个GridPanel，数据共享一份， 一个把需要锁定的列显示（考虑锁定列数目少的情况），去掉边框frame:false，布局在左边 另一个把多表头的做法 ，可参考GroupHeaderPlugin.js组件。   因为需要两个Gridpane...
ext gridpanel多层表头分组小计导出excel与Java后台交互全代码
10-30
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释，可能注释不全。分别为group.jsp，totals.jsp页面。
Extjs学习 Grid多表头
jazywoo_在路上
07-18 2988
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。 之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。 先看下效果图：   实现代码如下： HTM
Ext多表头
liguoxiong的专栏
03-14 4872
在ext3.2.1中的多表头设置 首先要将其中要用到的脚本与样式添加进来 ColumnHeaderGroup.js ColumnHeaderGroup.css GroupHeaderPlugin.js GroupHeaderPlugin.css 然后在EXT中要进行多表头设置的grid中的CM进行如下更改：             var directionChangeCm =
extjs3多表头
02-27
在ExtJS 3中，多表头（Multi-Header）功能允许用户创建复杂的、多层次的表格列布局，以更好地组织和展示数据。这种功能在数据展示和分析时非常有用，尤其是在处理大量信息时，可以提高用户体验和数据可读性。 多...
extjs 实现动态表头
09-15
标题“extjs 实现动态表头”表明我们要讨论的是如何在ExtJS环境中构建一个能够动态改变列头的表格。动态表头的核心在于理解ExtJS的GridPanel组件和ColumnModel类。GridPanel用于显示数据，而ColumnModel则定义了...
Ext3.4.0复杂(多行)表头+锁定多列例子
09-09
"Ext3.4.0复杂(多行)表头+锁定多列例子"这个标题涉及到的是一个JavaScript库——Ext JS的一个高级功能应用。Ext JS是一个流行的前端框架，用于构建富互联网应用程序（RIA），它提供了一套完整的组件化开发工具，包括...
Extjs 自定义树结构实现以及动态表头实现
08-21
在本文中，我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...
extjs动态表头，绝对的好东西啊
02-03
这个"extjs动态表头"的资源很可能是一个插件或组件，名为`Ext.ux.grid.DynamicGridPanel.js`，它扩展了ExtJS的标准GridPanel，增加了动态调整列的能力。 动态表头的核心功能包括： 1. **实时编辑**：用户可以在...
extjs grid 多表头插件
09-17
extjs grid 多表头 插件 extjs grid 多表头 插件
Ext GridPanel 表头合并
weixin_34396902的博客
10-14 138
  &lt;View&gt;         &lt;ext:GroupingView&gt;                &lt;HeaderGroupRows&gt;                        &lt;ext:HeaderGroupRow&gt;                               &lt;Columns&gt;           ...
ExtJS学习(三)Grid表格
分享牛
03-12 6302
表格说明Ext中的表格功能非常强大，包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能。表格由类Ext.grid.GridPanel定义，继承自Ext.Panel，其xtype为grid。在EXT中，表格控件必须包含列定义信息，并指定表格的数据存储器。表格数据最起码有列、数据、转换原始数据这3项。列信息由数组columns定义，表格的数据存储器由Ext.data.Store
ExtJS4学习笔记(六)---多表头Grid
随风的专栏
01-17 438
做项目的时候，有时候会遇到多表头的Grid，在EXTJS4中，多表头的实现已经很简单了，本文介绍如何实现多表头gird的功能。 之前有一篇文章，讲的是如何实现Grid的分页功能（地址是：www.mhzg.net/a/20115/201151811170246.html），本文在此基础上做出修改，达到多表头Grid+分页功能。 先看下效果图：   实现代码如下： HTML代码：
EXTJS gridpanel 动态设置表头
anqiaoej627921的博客
04-02 586
EXTJS gridpanel 动态设置表头，用reconfigure方法 var col = "([{ text :'Company', flex : 1, sortable : false, dataIndex:'company'},{ text:'Stock Price', columns:[{ text :'Price', width : 75, sortable : true...
EXTJS 3.0 资料 控件之 GridPanel属性与方法大全
01-08 178
1、Ext.grid.GridPanel 主要配置项： store：表格的数据集 columns：表格列模式的配置数组，可自动创建ColumnModel列模式 autoExpandColumn：自动充满表格未用空间的列，参数为列id，该id不能为0 stripeRows：表格是否隔行换色，默认为false cm、colModel：表格的列模式，渲染表格时必须设置该配置项 sm、selMo...
extjs双层表头
热门推荐
隋旭峰的专栏
08-11 1万+
首先要在页面中引用ColumnHeaderGroup.js和ColumnHeaderGroup.css这两个文件，否则会出现"Ext.ux.grid is undefined"错误。这两个文件放在EXT3.1发布包的examples/ux/目录下。     将上面的引用放在head标签中（具体引用路径根据文件所在路径来定）。 var row = [ { header: ''
extjs 表格锁定同时多表头
mayixi的专栏
06-23 1082
extjs 表格锁定同时多表头有比较好的实现吗？
如何用extjs 3.4做三层表头
笑看人生的专栏
10-14 1313
extjs 3.4 做三层表头
extjs多表头和表头合并
最新发布
06-09
ExtJS 提供了 `Ext.grid.plugin.MultiHeader` 插件来实现多表头功能，使用该插件可以在表格中创建多级表头。同时，可以使用 `grid.headerCt.insert` 方法来实现表头合并，具体实现方法如下： 1. 导入 `Ext.grid....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值