I am new to Extjs 4.2, When I work extjs 3.4 i used groupheader plugin. Now i have problem with column header in grid. I wrote 4 level columns and I have problem with last level child columns. Their height evaluated not correctly.
Problem view
+------------------------------------------------+-------------------------------------------------------+ | Column 1 | Column 2 | +-----------------------+------------------------+------------------------------+------------------------- | col11 | col12 | col21 | col22 | +-----------------------+------------------------+------------------------------+------------------------+ | col111 | col112 | col121 | col122 | col211 | col212 | | | +------------------------------------------------+------------------------------| col221 | col222 | | problem space | c2111 | c2112 | c2121 | c2122| | | +------------------------------------------------+-------+-------+_------+------+-------------+----------+ | | | | | store data | | | | | +--------------------------------------------------------------------------------------------------------+
If remove Column2, columns will be correct, Column1 contain 3 level, Column2 contain 4 level, that is why Column1 is rendered not correct, Please give me help if you can, how to fix this, I much time searched on Google this problem, but dont found answer.
This is code of grid
Ext.define("ValyutaApp.view.revenue.Republic", {
extend: "Ext.grid.Panel",
requires: [
"Ext.toolbar.Paging",
"Ext.ux.grid.FiltersFeature",
"Ext.form.field.Date",
"Ext.grid.feature.Summary"
],
alias: "widget.revenue-republic",
store: "ValyutaApp.store.revenue.Republic",
initComponent: function () {
var me = this;
me.features = me.buildFeatures();
me.columns = me.buildColumns();
me.dockedItems = me.buildDockedItems();
me.callParent(arguments);
},
buildFeatures: function () {
return {ftype: "summary"};
},
buildColumns: function () {
return [
{
text: "Шундан",
menuDisabled: true,
columns: [
{
text: "Микрофирма ва кичик корхоналар",
menuDisabled: true,
columns: [
{
text: "Сони",
dataIndex: "MFMPSONI",
width: 80,
//xtype: "numbercolumn",
align: "right",
summaryType: "sum"
},
{
text: "Суммаси",
dataIndex: "MFMPSUM",
width: 120,
xtype: "numbercolumn",
align: "right",
summaryType: "sum"
}
]
},
{
text: "Микрофирма ва кичик корхоналар тоифасига кирмайдиган",
menuDisabled: true,
columns: [
{
text: "Сони",
dataIndex: "KFSONI",
width: 80,
//xtype: "numbercolumn",
align: "right",
summaryType: "sum"
},
{
text: "Суммаси",
dataIndex: "KFSUM",
width: 120,
xtype: "numbercolumn",
align: "right",
summaryType: "sum"
}
]
}
]
},
{
text: "Шу жумладан: Имтиёзлар турлари сони ва суммаси",
menuDisabled: true,
columns: [
{
text: "ВМнинг 245-сонли карорига асосан",
menuDisabled: true,
columns: [
{
text: "3-а бандига мувофик",
menuDisabled: true,
columns: [
{
text: "Сони",
dataIndex: "LG3ASONI",
width: 80,
//xtype: "numbercolumn",
align: "right",
summaryType: "sum"
},
{
text: "Суммаси",
dataIndex: "LG3ASUM",
width: 120,
xtype: "numbercolumn",
align: "right",
summaryType: "sum"
}
]
},
{
text: "3-б бандига мувофик",
menuDisabled: true,
columns: [
{
text: "Сони",
dataIndex: "LG3BSONI",
width: 80,
//xtype: "numbercolumn",
align: "right",
summaryType: "sum"
},
{
text: "Суммаси",
dataIndex: "LG3BSUM",
width: 120,
xtype: "numbercolumn",
align: "right",
summaryType: "sum"
}
]
}
]
},
{
text: "Берилган имтиёзлар",
menuDisabled: true,
columns: [
{
text: "Сони",
dataIndex: "LGHUKSONI",
width: 80,
//xtype: 'numbercolumn',
align: 'right',
summaryType: 'sum'
},
{
text: "Суммаси",
dataIndex: "LGHUSUM",
width: 120,
xtype: 'numbercolumn',
align: 'right',
summaryType: 'sum'
}
]
}
]
}
]
},
buildDockedItems: function () {
return [
{
xtype: "toolbar",
dock: "top",
items: [
{
text: "Excel",
iconCls: "excel-icon",
action: "excel"
},
" Период: ",
{
xtype: "datefield",
name: "period",
width: 120
},
{
iconCls: "ok-icon",
action: "ok"
}
]
},
{
xtype: "pagingtoolbar",
dock: "bottom",
store: this.store,
displayInfo: true
}
];
}
});
This is code of window
Ext.define("ValyutaApp.view.revenue.Area",{
extend: "Ext.window.Window",
alias: "widget.revenue-area",
title: "Тушум тугрисида МАЪЛУМОТ",
width: 700,
height: 400,
autoScroll: true,
closable: true,
closeAction: 'hide',
maximizable: true,
layout:'fit',
items: [{
xtype: 'revenue-republic'
}]
});
I have a workaround for you. Add style to the first four columns:
style: "padding-top: 6px; padding-bottom: 5px;"
It is not very elegant, but you can use it till you find out where the problem comes from. Here is the result: jsfidle