千辛万苦熬出来,才开始学习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();