In Extjs 5.1 this below is CLS class for selected row in GridPanel
.x-grid-item-selected .x-grid-cell
You can override this cls for your customization for row selected cls.
Full Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ExtJS 5 Grid Example</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<style>
.x-grid-item-selected .x-grid-cell {
background-color: #B3D4FF !important;
color :#000000 !important;
}
</style>
<script>
Ext.onReady(function(){
Ext.define('Student',{
extend: 'Ext.data.Model',
fields:[
{name: 'id'},
{name: 'name'},
{name: 'mobile'},
{name: 'TestColumn',
convert : function(value, record){
return record.get('name')+" CHECK";
}
}
]
});
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'99999999999'},
{id:'5', name:'Ishan', mobile:'99898989898'},
{id:'3', name:'Akshu', mobile:'99999999999'},
{id:'4', name:'Sanjay 4', mobile:'999988885'},
{id:'5', name:'Sanjay 5', mobile:'999988885'},
{id:'6', name:'Sanjay 6', mobile:'999988885'},
{id:'7', name:'Sanjay 7', mobile:'999988885'},
{id:'8', name:'Sanjay 8', mobile:'999988885'},
{id:'9', name:'Sanjay 9', mobile:'999988885'},
{id:'10', name:'Sanjay 10', mobile:'999988885'},
{id:'11', name:'Sanjay 11', mobile:'999988885'},
{id:'12', name:'Sanjay 12', mobile:'999988885'},
{id:'13', name:'Sanjay 13 ', mobile:'999988885'},
{id:'14', name:'Sanjay 14', mobile:'999988885'},
{id:'15', name:'Sanjay 15', mobile:'999988885'},
{id:'16', name:'Sanjay 16', mobile:'999988885'},
{id:'17', name:'Sanjay 17', mobile:'999988885'},
{id:'18', name:'Sanjay 18', mobile:'999988885'},
{id:'19', name:'Sanjay 19', mobile:'999988885'},
{id:'20', name:'Sanjay 20', mobile:'999988885'},
{id:'21', name:'Sanjay 21', mobile:'999988885'},
{id:'22', name:'Sanjay 22', mobile:'999988885'},
{id:'23', name:'Sanjay 23', mobile:'999988885'},
{id:'24', name:'Zambia 24', mobile:'8888999997'}
]
});
Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore
});
});
Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 600,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1},
{text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},
],
initComponent: function () {
this.selModel = new Ext.selection.CheckboxModel( {
});
this.callParent(arguments);
}
});
</script>
</head>
</html>
.x-grid-item-selected .x-grid-cell
You can override this cls for your customization for row selected cls.
Full Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ExtJS 5 Grid Example</title>
<link rel="stylesheet" href="extjs-5.1.0/packages/ext-theme-gray/build/resources/ext-theme-gray-all.css"/>
<script src="extjs-5.1.0/extjs5.1.0-all-dashboard.js"></script>
<style>
.x-grid-item-selected .x-grid-cell {
background-color: #B3D4FF !important;
color :#000000 !important;
}
</style>
<script>
Ext.onReady(function(){
Ext.define('Student',{
extend: 'Ext.data.Model',
fields:[
{name: 'id'},
{name: 'name'},
{name: 'mobile'},
{name: 'TestColumn',
convert : function(value, record){
return record.get('name')+" CHECK";
}
}
]
});
var studentStore = Ext.create('Ext.data.Store',{
model: 'Student',
pageSize: 7,
data:[
{id:'1', name:'Binod', mobile:'99999999999'},
{id:'5', name:'Ishan', mobile:'99898989898'},
{id:'3', name:'Akshu', mobile:'99999999999'},
{id:'4', name:'Sanjay 4', mobile:'999988885'},
{id:'5', name:'Sanjay 5', mobile:'999988885'},
{id:'6', name:'Sanjay 6', mobile:'999988885'},
{id:'7', name:'Sanjay 7', mobile:'999988885'},
{id:'8', name:'Sanjay 8', mobile:'999988885'},
{id:'9', name:'Sanjay 9', mobile:'999988885'},
{id:'10', name:'Sanjay 10', mobile:'999988885'},
{id:'11', name:'Sanjay 11', mobile:'999988885'},
{id:'12', name:'Sanjay 12', mobile:'999988885'},
{id:'13', name:'Sanjay 13 ', mobile:'999988885'},
{id:'14', name:'Sanjay 14', mobile:'999988885'},
{id:'15', name:'Sanjay 15', mobile:'999988885'},
{id:'16', name:'Sanjay 16', mobile:'999988885'},
{id:'17', name:'Sanjay 17', mobile:'999988885'},
{id:'18', name:'Sanjay 18', mobile:'999988885'},
{id:'19', name:'Sanjay 19', mobile:'999988885'},
{id:'20', name:'Sanjay 20', mobile:'999988885'},
{id:'21', name:'Sanjay 21', mobile:'999988885'},
{id:'22', name:'Sanjay 22', mobile:'999988885'},
{id:'23', name:'Sanjay 23', mobile:'999988885'},
{id:'24', name:'Zambia 24', mobile:'8888999997'}
]
});
Ext.create('bin.com.ResultGrid',{
renderTo: Ext.getBody(),
store: studentStore
});
});
Ext.define('bin.com.ResultGrid',{
extend: 'Ext.grid.Panel',
width: 600,
height: 200,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', flex: 1},
{text: 'Test Column' , filter: 'string',dataIndex:'TestColumn', flex: 1},
],
initComponent: function () {
this.selModel = new Ext.selection.CheckboxModel( {
});
this.callParent(arguments);
}
});
</script>
</head>
</html>
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)