I have a table to show changes history. For some reason cell's width is different in each row. This is the code:
{
xtype: 'gridpanel',
padding: '10px',
name: 'KSTInfoPanel',
height: Ext.getBody().getViewSize().height*0.3,
store: 'hr.FM_ResponsibleKST',
forceFit: true,
hidden: false,
frame: true,
border: false,
bodyBorder: true,
frame: false,
autoScroll: false,
disableSelection: false,
region: 'east',
split: true,
columnLines: true,
viewConfig: {
preserveScrollOnRefresh: true,
deferEmptyText: true,
emptyText: '<div class="grid-data-empty"><div data-icon="/" class="empty-grid-icon"></div><div class="empty-grid-byline">Aktuell sind noch keine Daten vorhanden, die Ihnen angezeigt werden können.</div></div>',
loadingText: 'Daten werden geladen...',
stripeRows: false,
getRowClass: function(record, index) {
var c = record.get('active_ind');
if (c == 0) {
return 'x-grid-deleted .x-grid-cell-inner';
}
if(record['phantom'] == true){
return 'x-grid-created .x-grid-cell-inner';
}
if(c==null){
return 'x-grid-deleted .x-grid-cell-inner';
}
}
},
columns: [
{xtype: 'rownumberer', width: 20},
{xtype: 'gridcolumn', dataIndex: 'fm_kst_email_id', text:'fm_user_privilege_id', flex: 1, hidden: true, width: 50},
{xtype: 'gridcolumn', dataIndex: 'kst_id', text:'fm_emp_process_id', flex: 1, hidden: true, width: 50},
{
xtype: 'gridcolumn',
dataIndex: 'email',
text:'E-Mail der verantwortlichen Person',
hidden: false,
flex: 1,
/* renderer: function(value, record){
return value+"@krankenhaus-zams.at";
},*/
},
{xtype: 'gridcolumn', dataIndex: 'create_name', text:'Erstellt von', flex: 1, hidden: false},
{
xtype: 'datecolumn',
dataIndex: 'create_dt_tm',
text: 'Erstellt am',
format: 'd.m.Y H:i:s',
hidden: false,
flex: 1,
},
{xtype: 'gridcolumn', dataIndex: 'updt_name', flex: 1, text:'Aktualisiert von', hidden: false },
{
xtype: 'datecolumn',
dataIndex: 'updt_dt_tm',
text: 'Aktualisiert am',
format: 'd.m.Y H:i:s',
hidden: false,
flex: 1,
},
{
xtype: 'gridcolumn',
dataIndex: 'active_ind',
text: 'Aktiv',
hidden: false,
flex: 1,
renderer: function(value, record){
return (value == 1) ? 'Ja' : 'Nein';
},
}
],
}
And instead of normal table I'm getting this: table mess
I've tried to delete flex: 1 and hardcode width, but it wasn't helpful, result is still the same. I've set forceFit: false, but again nothing changed. I'm desperate. please Help...
UPDATE: Problem solved by checking panel where it was created. Panel should extend 'Ext.panel.Panel', but I forgot to change if from 'Ext.tree.Panel'. Just needed to pay more attention!