Different cells width ExtJS

50 Views Asked by At

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!

0

There are 0 best solutions below