Clear Up
SharpKit Reference

RowEditing Class

The Ext.grid.plugin.RowEditing plugin injects editing at a row level for a Grid. When editing begins, a small floating dialog will be shown for the appropriate row. Each editable column will show a field for editing. There is a button to save or cancel all changes for the edit.

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 column won't be editable and the value of the column will be displayed. To provide a custom renderer for non-editable values, use the editRenderer configuration on the column.

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.

  
    Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone'],
            data: [
            {"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"}
            ]
            });
            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: 'rowmodel',
            plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
            })
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            

Namespace: Ext.grid.plugin

Base Interfaces

Fields

Name Description
autoCancel True to automatically cancel any pending changes when the row editor begins editing a new row. False to force the user to explicitly cancel the pending changes. Defaults to true. Defaults to: true
clicksToMoveEditor The number of clicks to move the row editor to a new row while it is visible and actively editing another row. This will default to the same value as clicksToEdit.
errorSummary True to show a tooltip that summarizes all validation errors present in the row editor. Set to false to prevent the tooltip from showing. Defaults to true. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.