PDA

View Full Version : editable grid and check box in Grid



kumar_Rajesh78
14 Feb 2014, 9:33 AM
Dear experts,
I am new to extjs 4 and in the process of coverting my extjs 3 to extjs 4.
I need to have a grid with checkbox and then one out of 10 columns need to be editable.
I used checkboxselection model and new Ext.form.TextField() to achieve the same.

Do we follow the same way to achieve these two things in extjs 4 world.
Could you please advise.

Thanks a lot.
Rajesh

scottmartin
14 Feb 2014, 9:48 AM
See if this is what you are looking for:

You can run this code in our fiddle:
https://fiddle.sencha.com/#home



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'change'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "change":100 },
{ 'name': 'Bart', "email":"bart@simpsons.com", "change":-20 },
{ 'name': 'Homer', "email":"home@simpsons.com", "change":23 },
{ 'name': 'Marge', "email":"marge@simpsons.com", "change":-11 }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var editor = {
xtype: 'textfield',
allowBlank: false
};

var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
});

var sm = new Ext.selection.CheckboxModel({
checkOnly : true,
});

Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
selModel: sm,
columns: [
{ header: 'Name', dataIndex: 'name', editor: editor }, // allow edit
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Change', dataIndex: 'change' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),

plugins: [cellEditing]
});

});

kumar_Rajesh78
14 Feb 2014, 10:04 AM
Hi scott,
First of all thanks a lot for sending a quick response.
However, when I try to use it in my application, it does not find the cellEditing plugin.
I am not explicitly creating my Grid Panel by using ext.create rather I am doing it through Ext.define.
I tried defining these variables in my Viewport.js's initComponent Function.

Still it does not recognize it withing my grid panel definition. which is as follows.


Ext.define('Report.view.Leverage', {
extend: 'Ext.grid.Panel',
id: 'leverageGrid',
alias: 'widget.leverageeditor',
defaults: {
autoScroll: true
},
plugins: [cellEditing],
store: 'Leverages',
selModel: sm,
initComponent: function () {


I would like to understand as to where do we define the variable I may need to use for a particular view, or model or controllers. Do we have to define them globally or we can define them in their separate .js files.

Thanks once again.
Rajesh

kumar_Rajesh78
14 Feb 2014, 10:09 AM
Thanks Scott,
I was able to fix that issue by creating those variables on the top of the file before Ext.define in the same .js file where I defined my Grid panel as below.


this.cellEditing = new Ext.grid.plugin.CellEditing({
clicksToEdit: 2
});
var editor = {
xtype: 'textfield',
allowBlank: false
};
var sm = new Ext.selection.CheckboxModel({
checkOnly : true,
});
Ext.define('Report.view.Leverage', {
extend: 'Ext.grid.Panel',
id: 'myGrid',
alias: 'widget.myeditor',
defaults: {
autoScroll: true
},
But I would like to know if this is a good practice or we should create the variable outside of the grid definition.

Thanks a lot,
Rajesh

scottmartin
14 Feb 2014, 10:15 AM
In that case, it would be better to create it as a type:



plugins: [{ptype: 'cellediting', clicksToEdit: 1}],

scottmartin
14 Feb 2014, 10:18 AM
Also, it is much better practice to use itemId instead of id for accessing your components



// id: 'myGrid',
itemId: 'mygrid'

kumar_Rajesh78
14 Feb 2014, 10:23 AM
Thanks Scott,
For all the feedbacks and providing with the code sample.
That was exactly what I was looking for.

Appreciate your help.

Thanks,
Rajesh