1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    211
    Vote Rating
    0
    hieu79vn is an unknown quantity at this point

      0  

    Default Unanswered: Format a row in grid

    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,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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
    hieu79vn is an unknown quantity at this point

      0  

    Default


    it works very well. Thank you Scott

  4. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    211
    Vote Rating
    0
    hieu79vn is an unknown quantity at this point

      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,154
    Vote Rating
    475
    Answers
    685
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      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.

Thread Participants: 1