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
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
Aucun commentaire:
Enregistrer un commentaire