Some time you feel to create new column in grid based on the existing column like create firstname from given full name or create insertion date. Sometimes a simple type isn't enough, or we want to perform some processing when we load a Field's data. We can do this using a convert function. Here, we're going to create a new field based on another: When reading fields it is often necessary to convert the values received before using them or storing them in records. To handle these cases there is the convert method.
For example 1:
{
name: 'firstName',
convert: function(value, record) {
var fullName = record.get('name'),
splits = fullName.split(" "),
firstName = splits[0];
return firstName;
}
}For Example 2:
{
name: 'timestamp',
convert: function (value) {
return new Date(value);
}
}
Complete Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>ExtJS 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>
<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',
autoLoad: true,
data:[
{status: true, id:'1', name:'Binod', mobile:'9900159257'},
{status: false, id:'5', name:'Ishan', mobile:'9902887325'},
{status: true, id:'3', name:'Akshu', mobile:'90351070277'},
{status: false, id:'4', name:'Sanjay', mobile:'999988885'},
{status: true, id:'2', name:'Zambia', mobile:'8888999997'}
]
});
var selectionchangefired = false;
Ext.create('Ext.grid.Panel',{
renderTo: Ext.getBody(),
store: studentStore,
width: 450,
height: 200,
multiSelect: true,
title: 'Student Records',
plugins: 'gridfilters',
columns:[
{xtype: 'checkcolumn', text: 'Status', filter: 'string', dataIndex:'status', width: 50},
{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},
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: studentStore, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}]
});
});
</script>
</head>
</html>
Here, Test column is generated during run time based on other field.
No comments:
Post a Comment
You can put your comments here (Either feedback or your Question related to blog)