Results 1 to 5 of 5

Thread: Format a row in grid

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    211
    Vote Rating
    0
      0  

    Default Unanswered: Format a row in grid

    Hello,

    I have a grid with 6 rows, and I want to format only one row in blue, underline, cursor: hand, text align-center. I do like this
    viewConfig: {
    getRowClass: function (rec, idx, rowPrms, ds) {
    return rec.data.content == 'Test test test' ? 'bold_row1' : '';
    }
    },
    But as you see in the image below, the row is formatted only in blue and underline, but it's not aligned center and doesn't have cursor hand when mouse is over it.
    css file:
    .bold_row1 td{
    font-weight:bold !important;
    color: Blue;
    text-align:center;
    text-decoration:underline;
    cursor: pointer;
    }
    format.png

    Thank you

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Answers
    716
    Vote Rating
    499
      0  

    Default

    See if the following will work:

    Code:
    .bold_row .x-grid-cell-inner {
    	font-weight: bold !important;
    	color: blue;
    	text-align: center !important;
    	text-decoration: underline;
    	cursor: pointer;
    }
    Code:
    Ext.onReady(function () {
    
    	Ext.create('Ext.data.Store', {
    		storeId:'simpsonsStore',
    		fields:['name'],
    		data:{'items':[
    			{ 'name': 'Lisa'  },
    			{ 'name': 'Bart' },
    			{ 'name': 'Homer'  },
    			{ 'name': 'Marge'  }
    		]},
    		proxy: {
    			type: 'memory',
    			reader: {
    				type: 'json',
    				root: 'items'
    			}
    		}
    	});
    
    	Ext.create('Ext.grid.Panel', {
    		title: 'Simpsons',
    		store: Ext.data.StoreManager.lookup('simpsonsStore'),
    		columns: [
    			{ header: 'Name',  dataIndex: 'name', flex: 1 } // , align: 'center'
    		],
    		height: 200,
    		width: 400,
    		selModel: {
    			selType: 'cellmodel'
    		},
    
    		viewConfig: {
    			getRowClass: function(record, index) {
    				var name = record.get('name');
    				if (name === 'Bart') {
    					return 'bold_row';
    				}
    			}
    		},
    		renderTo: Ext.getBody()
    	});
    });
    f195370.png

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    211
    Vote Rating
    0
      0  

    Default

    it works very well. Thank you Scott

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    211
    Vote Rating
    0
      0  

    Default

    Hi Scott,
    If I want to make the height of this row smaller, is it possible?

    Thanks

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Answers
    716
    Vote Rating
    499
      0  

    Default

    Add line-height to your CSS rule:

    Code:
    .bold_row .x-grid-cell-inner {
    	font-weight: bold !important;
    	color: blue;
    	line-height: 5px;
    	text-align: center !important;
    	text-decoration: underline;
    	cursor: pointer;
    }
    Regards,
    Scott.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •