|
|
Ext.grid.plugin Namespace
Download SDK: SharpKit.ExtJs.zip
Classes
|
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
field. 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 Usage 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', field: '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()
});
|
|
|
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: true and 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
|
|
|
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
|
|
|
|
HeaderResizer
|
Plugin to add header resizing functionality to a HeaderContainer.
Always resizing header to the left of the splitter you are resizing. Todo: Consider RTL support, columns would always calculate to the right of
the splitter instead of to the left.
|
|
|
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
field. 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. 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 Usage 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', field: '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
|
|
|
SharpKit.AspNetAjax
Ext