zoukankan      html  css  js  c++  java
  • 【转】ExtJs Grid自动生成列

    这个问题纠结了我很久,本来想找个插件来解决的,但好像很少拿Extjs做报表啊,这么常用的功能竟然没有好的解决办法,唯一找到的一个插件就是AutoGrid2,可并不能解决问题,最后在老外的一段代码下终于找到了解决方法,原来如此简单.

    数据源:'/Scripts/11.js'   也可以是aspx、jsp页面或者servlet

    1: {'data':[{'number':'1','text1': '3','info1': '4','special1': '5'},{'number':'1','text1': '3','info1': '4','special1': '5'}],

    2: 'columModle':[

    3: {'header': '序号','dataIndex': 'number','width':40},

    4: {'header': '编码','dataIndex': 'text1'},

    5: {'header': '名称','dataIndex': 'info1'},

    6: {'header': '金额','dataIndex': 'special1'}

    7: ],

    8: 'fieldsNames':[{name: 'number'},{name: 'text1'}, {name: 'info1'},{name: 'special1'}]

    9: }

     

    1: Ext.onReady(function() {

    2:  

    3: var conn = new Ext.data.Connection();

    4: conn.request({ url: '/Scripts/11.js', callback: function(options, success, response) {

    5: var json = new Ext.util.JSON.decode(response.responseText);

    6: var cm = new Ext.grid.ColumnModel(json.columModle);

    7: var ds = new Ext.data.JsonStore({

    8: data: json.data,

    9: fields:json.fieldsNames

    10: });

    11: var grid = new Ext.grid.GridPanel({

    12: height: 200,

    13: 400,

    14: region: 'center',

    15: split: true,

    16: border: false,

    17: store: ds,

    18: cm: cm

    19: });

    20:  

    21: grid.render('grid-example');

    22: }

    23: });

     

    -------------------------------------------------

     

    以参看下:
    var cmItems = [];
    var cmConfig = {};
    cmItems.push(new Ext.grid.RowNumberer());
    cmItems.push(sm);
    cmItems.push({header : 'id',dataIndex : 'id',hidden : true,sortable : true});
    cmItems.push({header : '单据编号',dataIndex : 'no',sortable : true});
    cmItems.push({header : '组织',dataIndex : 'orgName',sortable : true});
    cmItems.push({header : '上报日期',dataIndex : 'reportDate',sortable : true});
    var priceTypeList = results.root
    for(var i=0;i<priceTypeList.length;i++){
         cmConfig = {header : priceTypeList[i].priceType,dataIndex : 'priceType'+priceTypeList[i].id,width : 100,sortable : true}
         cmItems.push(cmConfig);
    }
    cmItems.push({header : ' 备注',dataIndex : 'note',width : 150,sortable : true});
    cmItems.push({header : '创建人',dataIndex : 'createUserName',sortable : true});
    cmItems.push({header : '创建日期',dataIndex : 'createDate',width : 120,sortable : true});
    cmItems.push({header : '修改人',dataIndex : 'updateUserName',sortable : true});
    cmItems.push({header : '修改日期',dataIndex : 'updateDate',width : 120,sortable : true});
    cmItems.push({header : '状态',dataIndex : 'state',sortable : true});
    // 信息列
    var cm = new Ext.grid.ColumnModel(cmItems);

  • 相关阅读:
    研究性能测试工具之systemtap入门之latencytap脚本应用(一)
    研究性能测试工具之systemtap入门指南(三)
    内存泄露bug指南(二)
    研究性能测试工具之systemtap入门之latencytap脚本应用(二)
    内存泄露bug指南(一)
    VS2005 中文版下载
    Nhibernate事务出错
    页面生存周期
    web services enhancement (wse) 2.0/3.0研究与应用
    C#实现仿msn提示消息在登录后只弹出一次的效果(downmoon)
  • 原文地址:https://www.cnblogs.com/fireicesion/p/1804011.html
Copyright © 2011-2022 走看看