Clear Up
SharpKit Reference

Ext.grid.plugin Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
CellEditing

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.

CellEditingConfig
CellEditingEvents
DragDrop

This plugin provides drag and/or drop functionality for a GridView.

It creates a specialized instance of DragZone which knows how to drag out of a GridView and loads the data object which is passed to a cooperating DragZone's methods with the following properties:

  • copy : Boolean

    The value of the GridView's copy property, or true if the GridView was configured with allowCopy: trueand the control key was pressed when the drag operation was begun.

  • view : GridView

    The source GridView from which the drag originated.

  • ddel : HtmlElement

    The drag proxy element which moves with the mouse

  • item : HtmlElement

    The GridView node upon which the mousedown event was registered.

  • records : Array

    An Array of Models representing the selected data being dragged from the source GridView.

It also creates a specialized instance of Ext.dd.DropZone which cooperates with other DropZones which are members of the same ddGroup which processes such data objects.

Adding this plugin to a view means that two new events may be fired from the client GridView, beforedrop and drop

  
    Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name'],
            data: [["Lisa"], ["Bart"], ["Homer"], ["Marge"]],
            proxy: {
            type: 'memory',
            reader: 'array'
            }
            });
            Ext.create('Ext.grid.Panel', {
            store: 'simpsonsStore',
            columns: [
            {header: 'Name',  dataIndex: 'name', flex: true}
            ],
            viewConfig: {
            plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorganize'
            }
            },
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
            });
            
DragDropConfig
DragDropEvents
Editing

This class provides an abstract grid editing plugin on selected columns. The editable columns are specified by providing an editor in the column configuration.

Note: This class should not be used directly. See Ext.grid.plugin.CellEditing and Ext.grid.plugin.RowEditing.

EditingConfig
EditingEvents
HeaderReorderer

NOTE This is a private utility class for internal use by the framework. Don't rely on its existence.

HeaderReordererConfig
HeaderReordererEvents
HeaderResizer

Plugin to add header resizing functionality to a HeaderContainer. Always resizing header to the left of the splitter you are resizing.

HeaderResizerConfig
HeaderResizerEvents
RowEditing

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()
            });
            
RowEditingConfig
RowEditingEvents
© Copyright 2005-2011 SharpKit. All rights reserved.