由于有时候要求我们展示这样的grid,
Ext本身很难完成这样的需求。
所以我进行了如下的操作
//grid的store
Ext.define('_dataModel', {
extend: 'Ext.data.Model',
fields: []
});
var _store = Ext.create('Ext.data.Store', {
storeId: 'inquiryStore',
model: '_dataModel',
//async: false,
proxy: {
type: 'ajax',
//url: '/jsvc/service/CdProjectService/getCostParameters',
url: './json/CalculationMethodSelection.json',
reader: {
type: 'json',
root: 'result.content',
totalProperty: 'result.totalElements'
}
},
listeners: {
beforeload: function () {
var params = this.getProxy().extraParams;
params = Ext.apply(params, {
projectId: me.newDate.PROJECT_ID
});
},
load: function (field, records) {
Ext.Array.each(records, function (n, i) {
//进行判断在哪一行加入数据,然后对这行的数据进行操作。
if (n.data.INCOME_NAME === "产量") {
//找到需要修改样式的哪一行,进行
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
width: "100%",
heigth: "26px",
"text-align": "left",
"font-size": "16px"
})
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
}
if (n.data.INCOME_NAME === "价格") {
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
width: "100%",
heigth: "26px",
"text-align": "left",
"font-size": "16px"
})
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
}
if (n.data.INCOME_NAME === "补贴") {
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setStyle({
width: "100%",
heigth: "26px",
"text-align": "left",
"font-size": "16px"
})
Ext.get(Ext.query('#centerPanel .x-grid-item-container table')[i]).setHtml('<tr ><td style="text-align: center">' + n.data.XH + '</td><td colspan="18" style="height: 26px;" >' + n.data.INCOME_NAME + '</td></tr>')
}
})
}
},
autoLoad: true
});
//grid的其他地方都不要改变
xtype: 'gridbase',
store: _store,
id: 'grid',
autoScroll: true,
plugins: [
{
ptype: 'cellediting',
clicksToEdit: 1,
id: "gaswindowe ditor"
}
],
pagingtoolbar: false,
isLineFeed: true,
columns: {
defaults: {
align: 'center',
sortable: false,
menuDisabled: true,
tdCls: 'myCss',
defaults: {
sortable: false,
menuDisabled: true,
align: 'center',
/* editor: {
xtype: 'numberfield',
}*/
}
},
items: _gridHeadData,//这里是动态获取的表头
},
然后就变成了自己需要的样子。