Clear Up
SharpKit Reference

CellEditing Class

The Ext.grid.plugin.CellEditing plugin injects editing at a cell level for a Grid. Only a single cell will be editable at a time. The field that will be used for the editor is defined at the editor. The editor can be a field instance or a field configuration.

If an editor is not specified for a particular column then that cell will not be editable and it will be skipped when activated via the mouse or the keyboard.

The editor may be shared for each column in the grid, or a different one may be specified for each column. An appropriate field type should be chosen to match the data structure that it will be editing. For example, to edit a date, it would be useful to specify Ext.form.field.Date as the editor.

Example

A grid with editor for the name and the email columns:

  
    Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            data:{'items':[
            {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
            {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234"},
            {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
            {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
            ]},
            proxy: {
            type: 'memory',
            reader: {
            type: 'json',
            root: 'items'
            }
            }
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [
            {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
            {header: 'Email', dataIndex: 'email', flex:1,
            editor: {
            xtype: 'textfield',
            allowBlank: false
            }
            },
            {header: 'Phone', dataIndex: 'phone'}
            ],
            selType: 'cellmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
            })
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            

This requires a little explanation. We're passing in store and columns as normal, but we also specify a field on two of our columns. For the Name column we just want a default textfield to edit the value, so we specify 'textfield'. For the Email column we customized the editor slightly by passing allowBlank: false, which will provide inline validation.

To support cell editing, we also specified that the grid should use the 'cellmodel' selType, and created an instance of the CellEditing plugin, which we configured to activate each editor after a single click.

Namespace: Ext.grid.plugin

Base Interfaces

Methods

Name Description
startEditByPosition(object) Starts editing by position (row/column)
© Copyright 2005-2011 SharpKit. All rights reserved.