Wednesday, February 25, 2015

ExtJS Editable grid panel, extjs - Altering data in Ext.data.Model, Ext JS simple grid example with editable column, ExtJS Grid Edit Tutorial: Edit Data with an Ext JS Grid, ExtJs Simple Grid - Edit Column


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>

No comments:

Post a Comment

You can put your comments here (Either feedback or your Question related to blog)