Grid column renderer with html tag

**paipai** · 6 Jan 2012 1:18 AM

Hello,
In my app I use grid column renderer with <span> tag inside to display a default value with a different color than the value set by the user. It works fine in 4.0.7.

In 4.1b1 when the user wants to set the date the default value is not replaced by the date field. The date field is displayed after the default value.

Full code:

Code:

<html><head> <link rel="stylesheet" type="text/css" href="../../js/ext4/resources/css/ext-all.css"></head><body> <script type="text/javascript" src="../../js/ext4/ext.js"></script> <script type="text/javascript"> // When readyExt.onReady(function () { Ext.require('Ext.data.Store'); Ext.require('Ext.grid.Panel'); Ext.require('Ext.grid.plugin.CellEditing'); Ext.create('Ext.data.Store', { storeId:'simpsonsStore', fields:['name', 'email', 'date'], data:{'items':[ { 'date': 'Lisa', "email":"lisa@simpsons.com", "date":"" }, { 'name': 'Bart', "email":"bart@simpsons.com", "date":"" }, { 'name': 'Homer', "email":"home@simpsons.com", "date":"" }, { 'name': 'Marge', "email":"marge@simpsons.com", "date":"" } ]}, proxy: { type: 'memory', reader: { type: 'json', root: 'items' } }, selType: 'cellmodel' });Ext.create('Ext.grid.Panel', { title: 'Simpsons', store: Ext.data.StoreManager.lookup('simpsonsStore'), columns: [ { header: 'Name', dataIndex: 'name', field: 'textfield' }, { header: 'Email', dataIndex: 'email', flex: 1, field: 'textfield' }, { header: 'Date', dataIndex: 'date', field: 'datefield', renderer: function(value, metaData, record) { return value?value:'<span style="color: red">no date</span>'; } } ], height: 200, width: 400, renderTo: Ext.getBody(), plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ]});}); </script></body></html>

**paipai** · 6 Jan 2012 1:20 AM

The full code (bis):

Code:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="../../js/ext4/resources/css/ext-all.css">
</head>
<body>	
	<script type="text/javascript" src="../../js/ext4/ext.js"></script>		
	<script type="text/javascript">	        


// When ready
Ext.onReady(function () {    


	Ext.require('Ext.data.Store');
	Ext.require('Ext.grid.Panel');
	Ext.require('Ext.grid.plugin.CellEditing');
	
Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'date'],
    data:{'items':[
        { 'date': 'Lisa',  "email":"lisa@simpsons.com",  "date":""  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "date":"" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "date":""  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "date":""  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    },
    selType: 'cellmodel'	
});


Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { header: 'Name',  dataIndex: 'name', field: 'textfield' },
        { header: 'Email', dataIndex: 'email', flex: 1, field: 'textfield' },
        { 
        	header: 'Date', 
        	dataIndex: 'date', 
        	field: 'datefield',
        	renderer: function(value, metaData, record) {
        		return value?value:'<span style="color: red">no date</span>';
        	}
        	 
        }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody(),
    plugins: [										
		Ext.create('Ext.grid.plugin.CellEditing', {	
    		clicksToEdit: 1
		})
	]
});






});  
	      


</script>
</body>
</html>

**makana** · 24 Jan 2013 6:15 AM

I have a similar problem and think it relies on the same internal behaviors.

If I edit a grid cell and the renderer returns html (a string with span tags in my case, html is valid) for the new value, the cell will not become updated with the new value. Instead it shows the old one.

Nonetheless, if I load grid, it displays cells with html properly.

I have no clue what's the reason therefor...

**makana** · 24 Jan 2013 7:09 AM

After long debugging deep into the ExtJS internals, I found out, that my problem exists due to this one.
http://www.sencha.com/forum/showthread.php?247316
Seems it got fixed in later versions, i use 4.1.1, so it's the wrong thread for this. Sorry guys.

Grid column renderer with html tag

Thread Tools

Search Thread

Display

Hybrid View

Grid column renderer with html tag

Grid column renderer with html tag