Ext js 动态改变表头

千辛万苦熬出来，才开始学习extJs ，按照需求敲出来不容易，特此记录下，方便自己下次直接用。

关键点一：表头header从后台取出来：

<script type="text/javascript">
var CONFIG = {
yf1: '${statisticCondition.yf1}',
yf2: '${statisticCondition.yf2}',
yf3: '${statisticCondition.yf3}'
};
</script>

关键点二：grid初始化方法

preload: false,
structure : [{
header: '编号',
name: 'bh',
sortable: true
},{
header: CONFIG.yf1,
name: 'col1',
sortable: true
},{
header: CONFIG.yf2,
name: 'col2',
sortable: true
},{
header: CONFIG.yf3,
name: 'col3',
sortable: true
},{
header: '本季度总数',
name: 'jd1',
sortable: true
}],
defaultSortField: 'bh',
defaultSortDir: 'asc',
viewConfig : {
forceFit : true
},
initComponent : function() {
tssl.inspector.Grid.superclass.initComponent.call(this);
this.store.on('beforeload', function() {
this.getStore().baseParams['statisticCondition.tjjd'] = document.getElementById("tjjd").value;
this.getStore().baseParams['statisticCondition.tjnf'] = document.getElementById("tjnf").value;
}, this);
this.store.load();
},
loadData:function(){
this.store.reload();
}

关键点三：局部刷新--动态加载表头

//获取目标 grid 组件
var grid = Ext.getCmp("Grid");
//获得 列配置模型
var columnModel = grid.getColumnModel();

//获取对应列标题
var yf1_Index = columnModel.findColumnIndex("col1");
//修改 标题名称
columnModel.setColumnHeader(yf1_Index,"1月");

Ext.getCmp('Grid').loadData();