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
    8,637
    Answers
    613
    Vote Rating
    400
    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
    8,637
    Answers
    613
    Vote Rating
    400
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar