No announcement yet.

Override style CSS on grid cells

  • Filter
  • Time
  • Show
Clear All
new posts

  • Override style CSS on grid cells

    Did something change since Val 4 when you answered this question below? I'm trying to do this exact thing, override the inner-cell padding in a certain grid. I have an app specific CSS file, I'm suspecting I'm just not using the cls config correctly. Or Val 5 plays by different rules the way it uses themes/styles.

    I left Chrome debugger open with disable cache set, so it should be picking up my CSS file change. But the styling does not change.

     Ext.define('FloorProdEntry.view.FPEOperNotesGrid',{    extend : 'Ext.grid.Panel',     alias : 'widget.FPEopernotesgrid',     loadMask: false,     //scrollable: true,     frame: true,     ONORDER: 0,     ONOPER: 0,     cls: 'custom-grid',     //minHeight: 200,     //height: 500,     viewConfig: {        //forceFit: true,       enableRowBody: true,       emptyText: '<center>There are no order operation notes.</center>'    },
     .custom-grid .x-grid-cell-inner {     padding:5px 5px 5px 5px !important; }

  • #2
    I examined the impact of using cls in the Chrome debugger. Below is all it seems to have done:

    <div class="x-no-header-borders x-panel custom-grid x-panel-default-framed x-box-item x-grid"
    I am admittedly very weak in CSS, especially the rules of overriding. I don't know if this not working because "custom-grid" is inserted into the middle of the div class above or this just isn't working because of how themes/SCSS are applied, compared to days of just pure CSS styles cascading down.

    I've only ever used my app specific CSS in render config on a grid column. That always works. I tried overriding x-grid-inner-cell in render but it is too late, the x-grid-inner-cell class is already applied. The render class only affects the actual value of the column, not the cell element it is contained in.

    I'm guessing adding the classes proceeding "custom-grid" above to my css override will make no difference, the "x-no-header-borders" etc?

    Let me know if I'm banging my head against the Theme wall, this isn't important enough to create any custom theme. I just wanted to reduce the padding so more grid rows fit on screen without scrolling. Floor machine operators don't always scroll and miss some of notes, just trying to minimize as much as possible.


    • #3

      Not exactly sure what your issue is but here is a basic example of overriding the grid cell padding and even the color; Here is the Sencha Fiddle.

          .custom-grid .x-grid-cell-inner{
              color: red!important;
              padding: 1px!important;
      Grid Definition
      Ext.create('Ext.grid.Panel', {
          title    : 'Simpsons',
          store    :'simpsonsStore'),
          cls      : 'custom-grid',
          columns  : [{
              text      : 'Name',
              dataIndex : 'name'
          }, {
              text      : 'Email',
              dataIndex : 'email',
              flex      : 1
          }, {
              text      : 'Phone',
              dataIndex : 'phone'
          height   : 200,
          width    : 400,
          renderTo : Ext.getBody()
      You should see your CSS definition on the elements that have the class "x-grid-cell-inner" from within your grid that has your custom CSS class "custom-grid".

      Screen Shot 2019-04-15 at 1.04.07 PM.png


      • #4
        Hi Johnny. If you look at my initial post above, I did exactly what you did. The first Code example shows I applied cls, the 2nd Code example is in my CSS file.

        It does not work, that's why I wondered if this was some SASS/Theme problem on the core Extjs components. My CSS file is in use, it shows up when I use a "renderer" config on a grid column using a style in that CSS. So my app CSS is the last thing it should cascade to.


        • #5
          Actually I see the difference in your example and what I did. This is MVC, so I'm using a Ext.define with an initComponent function. I put my cls in the define section. The store is configured in the initComponent function. But I'm guessing you can't just stick cls: custom-grid in that function, there has to be more to it than that. I'm sure that is the at heart of problem.

               extend : 'Ext.grid.Panel',    
              alias : 'widget.FPEopernotesgrid',    
              loadMask: false,    
              scrollable: true,    
              frame: true,    
              ONORDER: 0,    
             ONOPER: 0,    
             cls: 'custom-grid',    
             height: 800,    
              viewConfig: {      
                   enableRowBody: true,      
                   emptyText: '<center>There are no order operation notes.</center>'    
          initComponent : function(){                
     = '';        
              this.columns = this.buildColumns();        
                scope: this,            
                beforeload: function(st) {                
                    st.getProxy().extraParams  = {                  
                      pgm: 'VALV450',                    
                     action: 'getOperNotes',                    
                     orderno : this.ONORDER,                    
                    operno : this.ONOPER                 };            
             buildColumns : function(){        
                 return [{    
                    header: '<b>Notes</b>',  
                     width: 380,
                     sortable: false,  
                     dataIndex: 'SNTEXT',  
                     renderer: function(val, x, store){    
                        return '<div class="vv-griddescription">' + val + '</div>';  
          } });
          Last edited by TerryB; 04-15-2019, 03:21 PM.


          • #6
            I found the issue Johnny. This is an app with it's own MVC folder/namespace that can be called/used from another MVC app/namespace. So I was dead wrong that the app CSS was in play, it was not. The CALLING app's CSS was. As soon as I moved that style to other CSS, it worked perfectly. That's a major Duh. But you helped me solve by confirming it should work, thanks for that! I wasn't clear if CSS overrides could work on any aspect of a theme.


            • #7

              Glad you found the issue