Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maltempi/extjs-action-column-row-editing
An ExtJS plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column.
https://github.com/maltempi/extjs-action-column-row-editing
editable editable-grid extjs extjs-plugin grid javascript rowediting-changing
Last synced: 27 days ago
JSON representation
An ExtJS plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column.
- Host: GitHub
- URL: https://github.com/maltempi/extjs-action-column-row-editing
- Owner: maltempi
- License: mit
- Created: 2017-03-26T14:55:03.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2021-09-13T17:03:09.000Z (over 3 years ago)
- Last Synced: 2024-08-03T16:09:00.006Z (4 months ago)
- Topics: editable, editable-grid, extjs, extjs-plugin, grid, javascript, rowediting-changing
- Language: JavaScript
- Homepage: https://maltempi.github.io/extjs-action-column-row-editing/demo/
- Size: 19.5 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-extjs - ActionColumnRowEditing - A plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column. (Extensions, components / Components, ux)
README
# Action Column Row Editing - A custom ExtJS Plugin
An ExtJS plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column.
## General Info
This is a custom plugin created as a alternative to default usability provided by Ext.grid.plugin.RowEditing and it is also a workaround to this issue: https://www.sencha.com/forum/showthread.php?337303-Buttons-(Save-and-Cancel)-are-overlapped-by-grid-on-rowediting-plugin
* Demo website: https://maltempi.github.io/extjs-action-column-row-editing/demo/
* Issues: https://github.com/maltempi/extjs-action-column-row-editing/issues
* License: https://github.com/maltempi/extjs-action-column-row-editing/blob/master/LICENSE
* General rules: Feel free to suggest new ideas, fork it and so on :-)
* Required Version: ExtJS 6.2.0 (actually it wasn't tested on others versions)
## Properties
### hiddenButtons
It hides the default action buttons
If it is false, it will work as the default Ext.grid.plugin.RowEditing.
* Defaults to: true
### buttonsUi
The action buttons ui
* Defaults to: 'default'
### saveButton
It adds a button in a extra action column into grid.
* Accepts: boolean (true show | false hide)| button object (not implemented yet)
* Defaults to: true
### saveButtonIconCls
Save button icon class
* Accepts: string
* Defaults to: 'x-fa fa-check'
### saveButtonToolTip
Save button tool tip
* Accepts: string
* Defaults to: 'Save the edited line'
### cancelButton
It adds a button in a extra action column into grid.
* Accepts: boolean (true show | false hide)| button object (not implemented yet)
* Defaults to: true
### cancelButtonIconCls
The cancel button icon class
* Accepts: string
* Defaults to: 'x-fa fa-times'
### cancelButtonToolTip
* Accepts: string
* Defaults to: 'Cancel'
### hiddenColumnsOnEdit
A list of columns ids to hide on edit.
* Accepts: list string (itemId)
* Defaults to: empty list []
### extraButtons
Sets extra buttons on action column
* Accepts: list of objects
* Defaults to: empty list []
### extraColumns
* Stores the extra columns to hide and show it on events.
* Defaults to: empty list []
### Example
```javascript
// [Defines the fake data]
var data = [{
column1: 'Row 1 - Column 1',
column2: 'Row 1 - Column 2'
}, {
column1: 'Row 2 - Column 1',
column2: 'Row 2 - Column 2'
}];
var store = Ext.create('Ext.data.Store', {
fields: ['column1', 'column2'],
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});
store.loadRawData(data, false);
// [/Defines the fake data]
Ext.create('Ext.grid.Panel', {
renderTo: document.body,
title: 'Test Only',
plugins: {
ptype: 'actionColumnRowEditing',
hiddenColumnsOnEdit: ['startEditActionColumn'],
clicksToEdit: 2,
saveButtonIconCls: 'x-fa fa-floppy-o'
/*
Put any other supported configuration here.
*/
},
store: store,
// Define your columns
columns: [{
xtype: 'gridcolumn',
align: 'left',
dataIndex: 'column1',
text: 'Column 1',
editor: 'textfield',
}, {
xtype: 'gridcolumn',
align: 'center',
editor: 'textfield',
dataIndex: 'column2',
text: 'Column 2'
}, {
// This column will hide when start to edit.
xtype: 'actioncolumn',
width: 50,
border: false,
itemId: 'startEditActionColumn',
align: 'center',
items: [
{
iconCls: 'x-fa fa-pencil-square-o',
handler: function (grid, rowIndex, colIndex) {
grid.editingPlugin.startEdit(rowIndex, 0);
}
}
]
}]
});
```
Example result (on editing mode):
