Editable column in array grid?

[jaisonjames]

I am a beginner in extjs.
Can someone help me make a specific editable column in a normal array grid? Screenshot and using code are here.


/*!
* Ext JS Library 3.2.1
* Copyright(c) 2006-2010 Ext JS, Inc.
* [email protected]
* http://www.extjs.com/license
*/
Ext.onReady(function(){

// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// sample static data for the store
var myData = [
['Team Member','Resources','Employees/Contractors','Text','Sequence','Asceending']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'object'},
{name: 'field'},
{name: 'displayName'},
{name: 'type'},
{name: 'sorttype'},
{name: 'direction'}
]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'cate-field',header: 'Object', sortable: true},
{header: 'Field', sortable: true},
{header: 'Display Name', sortable: true},
{header: 'Type', sortable: true},
{header: 'Sort Type', sortable: true},
{header: 'Direction', sortable: true}
],
stripeRows: true,
autoExpandColumn: 'cate-field',
height: 175,
width: 690,
title: 'Category Field (Axis)',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render('cc-fs-right-r2');
});


Thanks

[Condor]

For an editable grid you need to:
1. Change the GridPanel to an EditorGridPanel.
2. Define an editor for every column that should be editable.

[laurentParis]

With normal GridPanel, is not possible to edit value into cell
so, ExtJs extend GridPanel with EditorGridPanel to doing that!

in your case, for edit only third column


Ext.onReady(function () {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

// sample static data for the store
var myData = [
['Team Member', 'Resources', 'Employees/Contractors', 'Text', 'Sequence', 'Asceending']
];

// create the data store
var store = new Ext.data.ArrayStore(
{
fields: [
{
name: 'object'
}, {
name: 'field'

}, {
name: 'displayName'
}, {
name: 'type'
}, {
name: 'sorttype'
}, {
name: 'direction'
}]
});

// manually load local data
store.loadData(myData);

// create the Grid
var grid = new Ext.grid.EditorGridPanel(
{
store: store,
columns: [
{
id: 'cate-field',
header: 'Object',
sortable: true
}, {
header: 'Field',
sortable: true,
dataIndex: 'field',
editor: new Ext.form.TextField({
})
}, {
header: 'Display Name',
sortable: true
}, {
header: 'Type',
sortable: true
}, {
header: 'Sort Type',
sortable: true
}, {
header: 'Direction',
sortable: true
}],
stripeRows: true,
autoExpandColumn: 'cate-field',
height: 175,
width: 690,
title: 'Category Field (Axis)',
// config options for stateful behavior
stateful: true,
stateId: 'grid'
});

// render the grid to the specified div in the page
grid.render(document.body);
});



ps: don't forget to use 'dataIndex' and use tag code (=> more easy to read) !

[jaisonjames]

Excellent tips. Lot of thanks :) Could you suggest any nice tutorial for beginners.


For an editable grid you need to:
1. Change the GridPanel to an EditorGridPanel.
2. Define an editor for every column that should be editable.