Very basic example of ExtJS 5.1 Grid Panel with editable column functionality.
For making column as editable, add two things:
1. Add below plugin to your grid panel
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
})
],
2. In column definition add below configuration:
editor: 'textfield'
Here is full running 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:'999999999'},
{id:'5', name:'Ishan', mobile:'898989898998'},
{id:'3', name:'Akshu', mobile:'1234123499'},
{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:'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',
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
})
],
columns:[
{text: 'Roll Number', filter: 'string', dataIndex:'id', width: 100},
{text: 'Name' , filter: 'string',dataIndex:'name', width: 100},
{text: 'Mobile' , filter: 'string',dataIndex:'mobile', editor: 'textfield', 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>
