extjs 动态生成表格问题

Question

现在项目开发中需要使用extjs生成如下面图片的一个表格。
此表格有两个表头，即横向的和纵向的。并且都是动态的。请大家指点思路，不胜感谢！

Answer 1

我看了一下 Ext.XTemplate，但是不好使用双重for循环，并且竖着的表头也不知道如何生成。困扰了好几天了。

Answer 2

使用EXTJS中遇到过和你一样的问题，而且还要比你的复杂，表头合并、行列数据合并当初考虑用extjs，但是太麻烦最后就用了服务器控件GridView轻易搞定。

Answer 3

问题解决了，我的做法是从服务器上动态返回json文件，格式如下。 grid中的数据从json中取值即可。 var json = {
'columModle' : [{
header : "",
dataIndex : "od",
width : 80,
id : 'od'
}, {
header : "上海虹桥",
dataIndex : "AOH",
width : 50
}, {
header : '上海',
width : 50
dataIndex : 'SHH'
}, {
header : '上海西',
width : 50,
dataIndex : 'SXH'
}, {
header : '苏州',
width : 50,
dataIndex : 'SZH'
}, {
header : '苏州新区',
width : 50,
dataIndex : 'ITH'
}, {
header : '无锡新区',
width : 50,
dataIndex : 'IFH'
}, {
header : '无锡',
width : 50,
dataIndex : 'WXH'
}, {
header : '惠山',
width : 50,
dataIndex : 'VCH'
}, {
header : '戚墅堰',
width : 50,
dataIndex : 'QYH'
}, {
header : '丹阳',
width : 50,
dataIndex : 'DYH'
}, {
header : '丹徒',
width : 50,
dataIndex : 'RUH'
}, {
header : '镇江',
width : 50,
dataIndex : 'ZJH'
}, {
header : '宝华山',
width : 50,
dataIndex : 'BWH'
}, {
header : '仙林',
width : 50,
dataIndex : 'XPH'
}, {
header : '南京',
width : 50,
dataIndex : 'NJH'
}],
'fieldsNames' : [{
name : 'od',
type : 'string'
},  {
name : 'SXH',
type : 'string'
}, {
name : 'KNH',
type : 'string'
}, {
name : 'AIH',
type : 'string'
}, {
name : 'KAH',
type : 'string'
}, {
name : 'SZH',
type : 'string'
}, {
name : 'ITH',
type : 'string'
}, {
name : 'IFH',
type : 'string'
}, {
name : 'WXH',
type : 'string'
}, {
name : 'VCH',
type : 'string'
}, {
name : 'QYH',
type : 'string'
}, {
name : 'CZH',
type : 'string'
}, {
name : 'DYH',
type : 'string'
}, {
name : 'RUH',
type : 'string'
}, {
name : 'ZJH',
type : 'string'
}, {
name : 'BWH',
type : 'string'
}, {
name : 'XPH',
type : 'string'
}, {
name : 'NJH',
type : 'string'
}],
'data' : [{
'od' : '上海虹桥',
'AOH' : '-',
'SHH' : '-',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '上海',
'AOH' : '-',
'SHH' : '-',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '上海西',
'AOH' : '10',
'SHH' : '10',
'SXH' : '-',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '南翔北',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '-',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '安亭北',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '-',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '花桥',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '-',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '昆山南',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '-',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '阳澄湖',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '-',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '苏州园区',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '-',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '苏州',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '-',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '苏州新区',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '-',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '无锡新区',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '-',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '无锡',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '-',
'VCH' : '10',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '惠山',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '-',
'QYH' : '10',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '戚墅堰',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '-',
'CZH' : '10',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
}, {
'od' : '常州',
'AOH' : '10',
'SHH' : '10',
'SXH' : '10',
'NEH' : '10',
'ASH' : '10',
'VQH' : '10',
'KNH' : '10',
'AIH' : '10',
'KAH' : '10',
'SZH' : '10',
'ITH' : '10',
'IFH' : '10',
'WXH' : '10',
'VCH' : '10',
'QYH' : '10',
'CZH' : '-',
'DYH' : '10',
'RUH' : '10',
'ZJH' : '10',
'BWH' : '10',
'XPH' : '10',
'NJH' : '10'
} ]
};