PDA

View Full Version : Data is not displaying in the grid whn use renderer to display the colors in the grid



kamalakarreddy vancha
24 Mar 2014, 5:25 AM
Hi..
Here am facing problem when am applying the backgroud color to the grid column by using render.
In my application the color is applying to the grid columns based on condition but at the same time data is
not diplaying in the grid(Fig 1).
At the same time the data is coming with the URL (when i select particular column the data is displaying the form.
when i select the second row the values are showing in the form(Fig 2))
but it is not displaying in the gid columns.
Please help me..


Here is my code..
<html>
<head>
<title>kamalakar</title>
<link rel='stylesheet' href='/pnc4.1.0/resources/extjs/resources/css/ext-all.css' />
<link rel='stylesheet' href='/pnc4.1.0/resources/css/custom_css_cmc.css' />
<script type='text/javascript' src='/pnc4.1.0/resources/extjs/ext-all-dev.js'></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: [
{name: 'company'},
{name: 'price' }
]
});
var store = {
model: 'Company',
proxy:{
url: 'grid_data.js',
type: 'ajax',
reader:{
type:'json'
}
}
};
var resultsPanel = Ext.create('Ext.panel.Panel', {
width:600,
height: 600,
items: [ {
xtype : 'grid',
id:'gridId',
region:'center ',
store : store,
height: 200,
title: 'Array Grid',
columns:[
{
text : 'Company',
flex:1,
align:'left',
dataIndex:'company',
renderer: function (val, meta, record) {
if (record.get('price') == record.get('company')) {
meta.tdCls = 'notInPort';
}
}
},{
text : 'Price',
flex:1,
align:'center',
dataIndex : 'price',
renderer: function (val, meta, record) {
if (record.get('price') == record.get('company')) {
meta.tdCls = 'notInPort';
}
}

}
],
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
Ext.getCmp('formId').getForm().loadRecord(records[0]);
}
}
}
},{
xtype:'form',
region:'east ',
id:'formId',
activeRecordCmc:'',
title: 'Details',
width:600,
height:200,
items: [{
fieldLabel: 'Company',
xtype: 'textfield',
id:'companyId',
name:'company',
labelAlign:'right',
width:200,
labelWidth:90,
margin:'10 0 0 20',
allowBlank:false
},{
fieldLabel: 'Company',
xtype: 'textfield',
id:'priceId',
name:'price',
labelAlign:'right',
width:200,
labelWidth:90,
margin:'10 0 0 20',
allowBlank:false
}]
}]
});
var win = Ext.create('Ext.window.Window', {
title: 'Compose message',
collapsible: true,
animCollapse: true,
maximizable: true,
width: 600,
height:450,
layout: 'border',
items: [resultsPanel],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'Retrieve',
handler:function(){
var grid = Ext.getCmp('gridId');
grid.getStore().loadPage();
}
}]
}]
});
win.show();
})
</script>
</head>
<body></body>


</html>



This is data.....
grid_data.js


[{
company: 'Apple',
price: '123'
}, {
company: '120',
price: '120'
}, {
company: 'sky',
price: '3'

}]


This is the css code...

.notInPort {
background:#461B7E !important;
background-image: none;
}



Thanks
Kamalakar Reddy

Farish
24 Mar 2014, 5:27 AM
in your renderer function, you have to return the value at the end.


renderer: function (val, meta, record) {
if (record.get('price') == record.get('company')) {
meta.tdCls = 'notInPort';
return val;
}
}

kamalakarreddy vancha
24 Mar 2014, 9:25 PM
Thanks Farish..Now its solved....