开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > Java编程 > JavaScript > 查看源码
column-header-group.js
资源名称：ext-3.1.0.zip　[点击查看]
上传用户：dawnssy
上传日期：2022-08-06
资源大小：9345k
文件大小：4k
源码类别：

JavaScript

开发平台：

JavaScript

column-header-group.js：源码内容
  1. /*!  * Ext JS Library 3.1.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function() {
  2.     var structure = {
  3.         Asia: ['Beijing', 'Tokyo'],
  4.         Europe: ['Berlin', 'London', 'Paris']
  5.     },
  6.     products = ['ProductX', 'ProductY'],
  7.     fields = [],
  8.     columns = [],
  9.     data = [],
  10.     continentGroupRow = [],
  11.     cityGroupRow = [];
  12.     
  13.         
  14.     /*
  15.      * Example method that generates:
  16.      * 1) The column configuration for the grid
  17.      * 2) The column grouping configuration
  18.      * 3) The data for the store
  19.      * 4) The fields for the store
  20.      */
  21.     function generateConfig(){
  22.         var arr,
  23.             numProducts = products.length;
  24.             
  25.         Ext.iterate(structure, function(continent, cities){
  26.             continentGroupRow.push({
  27.                 header: continent,
  28.                 align: 'center',
  29.                 colspan: cities.length * numProducts
  30.             });
  31.             Ext.each(cities, function(city){
  32.                 cityGroupRow.push({
  33.                     header: city,
  34.                     colspan: numProducts,
  35.                     align: 'center'
  36.                 });
  37.                 Ext.each(products, function(product){
  38.                     fields.push({
  39.                         type: 'int',
  40.                         name: city + product
  41.                     });
  42.                     columns.push({
  43.                         dataIndex: city + product,
  44.                         header: product,
  45.                         renderer: Ext.util.Format.usMoney
  46.                     });
  47.                 });
  48.                 arr = [];
  49.                 for(var i = 0; i < 20; ++i){
  50.                     arr.push((Math.floor(Math.random()*11) + 1) * 100000);
  51.                 }
  52.                 data.push(arr);
  53.             });
  54.         })
  55.     }
  56.     
  57.     // Run method to generate columns, fields, row grouping
  58.     generateConfig();
  59.     
  60.     
  61.     /*
  62.      * continentGroupRow at this point is:
  63.      * [
  64.      *     {header: 'Asia', colspan: 4, align: 'center'},
  65.      *     {header: 'Europe', colspan: 6, align: 'center'}
  66.      * ]
  67.      * 
  68.      * cityGroupRow at this point is:
  69.      * [
  70.      *     {header: 'Beijing', colspan: 2, align: 'center'},
  71.      *     {header: 'Tokyo', colspan: 2, align: 'center'},
  72.      *     {header: 'Berlin', colspan: 2, align: 'center'},
  73.      *     {header: 'London', colspan: 2, align: 'center'},
  74.      *     {header: 'Paris', colspan: 2, align: 'center'}
  75.      * ]
  76.      */
  77.     var group = new Ext.ux.grid.ColumnHeaderGroup({
  78.         rows: [continentGroupRow, cityGroupRow]
  79.     });
  80.     
  81.     /*
  82.      * fields at this point is:
  83.      * [
  84.      *     {type: 'int', name: 'BeijingProductX'},
  85.      *     {type: 'int', name: 'BeijingProductY'},
  86.      *     {type: 'int', name: 'TokyoProductX'},
  87.      *     {type: 'int', name: 'TokyoProductY'},
  88.      *     {type: 'int', name: 'BerlinProductX'},
  89.      *     {type: 'int', name: 'BerlinProductY'},
  90.      *     {type: 'int', name: 'LondonProductX'},
  91.      *     {type: 'int', name: 'LondonProductY'},
  92.      *     {type: 'int', name: 'ParisProductX'},
  93.      *     {type: 'int', name: 'ParisProductY'}
  94.      * ]
  95.      * 
  96.      * columns at this point is:
  97.      * [
  98.      *     {dataIndex: 'BeijingProductX', header: 'ProductX'},
  99.      *     {dataIndex: 'BeijingProductY', header: 'ProductY'},
  100.      *     {dataIndex: 'TokyoProductX', header: 'ProductX'},
  101.      *     {dataIndex: 'TokyoProductY', header: 'ProductY'},
  102.      *     {dataIndex: 'BerlinProductX', header: 'ProductX'},
  103.      *     {dataIndex: 'BerlinProductY', header: 'ProductY'},
  104.      *     {dataIndex: 'LondonProductX', header: 'ProductX'},
  105.      *     {dataIndex: 'LondonProductY', header: 'ProductY'},
  106.      *     {dataIndex: 'ParisProductX', header: 'ProductX'},
  107.      *     {dataIndex: 'ParisProductY', header: 'ProductY'}
  108.      * ]
  109.      */
  110.     var grid = new Ext.grid.GridPanel({
  111.         renderTo: 'column-group-grid',
  112.         title: 'Sales By Location',
  113.         width: 1000,
  114.         height: 400,
  115.         store: new Ext.data.ArrayStore({
  116.             fields: fields,
  117.             data: data
  118.         }),
  119.         columns: columns,
  120.         viewConfig: {
  121.             forceFit: true
  122.         },
  123.         plugins: group
  124.     });
  125. });