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

    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,251
    Vote Rating
    485
    Answers
    694
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      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,251
    Vote Rating
    485
    Answers
    694
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      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