{"id":13765970,"url":"https://github.com/maltempi/extjs-action-column-row-editing","last_synced_at":"2025-05-10T21:32:31.006Z","repository":{"id":96484334,"uuid":"86240776","full_name":"maltempi/extjs-action-column-row-editing","owner":"maltempi","description":"An ExtJS plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column.","archived":false,"fork":false,"pushed_at":"2021-09-13T17:03:09.000Z","size":20,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-17T01:33:16.469Z","etag":null,"topics":["editable","editable-grid","extjs","extjs-plugin","grid","javascript","rowediting-changing"],"latest_commit_sha":null,"homepage":"https://maltempi.github.io/extjs-action-column-row-editing/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maltempi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-03-26T14:55:03.000Z","updated_at":"2023-06-19T17:06:09.000Z","dependencies_parsed_at":"2023-03-10T00:15:38.410Z","dependency_job_id":null,"html_url":"https://github.com/maltempi/extjs-action-column-row-editing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maltempi%2Fextjs-action-column-row-editing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maltempi%2Fextjs-action-column-row-editing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maltempi%2Fextjs-action-column-row-editing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maltempi%2Fextjs-action-column-row-editing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maltempi","download_url":"https://codeload.github.com/maltempi/extjs-action-column-row-editing/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253485682,"owners_count":21916063,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["editable","editable-grid","extjs","extjs-plugin","grid","javascript","rowediting-changing"],"created_at":"2024-08-03T16:00:49.839Z","updated_at":"2025-05-10T21:32:30.753Z","avatar_url":"https://github.com/maltempi.png","language":"JavaScript","funding_links":[],"categories":["Extensions, components"],"sub_categories":["Components, ux"],"readme":"# Action Column Row Editing - A custom ExtJS Plugin\nAn ExtJS plugin based on Ext.grid.plugin.RowEditing changing the default floating buttons to an action column.\n\n## General Info\nThis 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\n\n* Demo website: https://maltempi.github.io/extjs-action-column-row-editing/demo/\n* Issues: https://github.com/maltempi/extjs-action-column-row-editing/issues\n* License: https://github.com/maltempi/extjs-action-column-row-editing/blob/master/LICENSE \n* General rules: Feel free to suggest new ideas, fork it and so on :-)\n* Required Version: ExtJS 6.2.0 (actually it wasn't tested on others versions)\n\n## Properties\n\n### hiddenButtons\nIt hides the default action buttons\nIf it is false, it will work as the default Ext.grid.plugin.RowEditing.\n* Defaults to: true\n\n### buttonsUi\nThe action buttons ui\n* Defaults to: 'default'\n\n### saveButton\nIt adds a button in a extra action column into grid.\n* Accepts: boolean (true show | false hide)| button object (not implemented yet)\n* Defaults to: true\n\n### saveButtonIconCls\nSave button icon class\n* Accepts: string\n* Defaults to: 'x-fa fa-check'\n\n### saveButtonToolTip\nSave button tool tip\n* Accepts: string\n* Defaults to: 'Save the edited line'\n\n\n### cancelButton\nIt adds a button in a extra action column into grid.\n* Accepts: boolean (true show | false hide)| button object (not implemented yet)\n* Defaults to: true\n\n### cancelButtonIconCls\nThe cancel button icon class\n* Accepts: string\n* Defaults to: 'x-fa fa-times'\n\n\n### cancelButtonToolTip\n* Accepts: string\n* Defaults to: 'Cancel'\n\n### hiddenColumnsOnEdit\nA list of columns ids to hide on edit.\n* Accepts: list string (itemId)\n* Defaults to: empty list []\n\n### extraButtons\nSets extra buttons on action column\n* Accepts: list of objects\n* Defaults to: empty list []\n\n### extraColumns\n* Stores the extra columns to hide and show it on events. \n* Defaults to: empty list []\n\n### Example\n\n```javascript\n\n// [Defines the fake data]\nvar data = [{\n    column1: 'Row 1 - Column 1',\n    column2: 'Row 1 - Column 2'\n}, {\n    column1: 'Row 2 - Column 1',\n    column2: 'Row 2 - Column 2'\n}];\n\nvar store = Ext.create('Ext.data.Store', {\n    fields: ['column1', 'column2'],\n    proxy: {\n        type: 'memory',\n        reader: {\n            type: 'json'\n        }\n    }\n});\n\nstore.loadRawData(data, false);\n// [/Defines the fake data]\n\nExt.create('Ext.grid.Panel', {\n\n    renderTo: document.body,\n\n    title: 'Test Only',\n\n    plugins: {\n        ptype: 'actionColumnRowEditing',\n        hiddenColumnsOnEdit: ['startEditActionColumn'],\n        clicksToEdit: 2,\n        saveButtonIconCls: 'x-fa fa-floppy-o'\n        /*\n        Put any other supported configuration here.\n        */\n    },\n\n    store: store,\n\n    // Define your columns\n    columns: [{\n        xtype: 'gridcolumn',\n        align: 'left',\n        dataIndex: 'column1',\n        text: 'Column 1',\n        editor: 'textfield',\n    }, {\n        xtype: 'gridcolumn',\n        align: 'center',\n        editor: 'textfield',\n        dataIndex: 'column2',\n        text: 'Column 2'\n    }, {\n\n        // This column will hide when start to edit.\n        xtype: 'actioncolumn',\n        width: 50,\n        border: false,\n        itemId: 'startEditActionColumn',\n        align: 'center',\n        items: [\n            {\n                iconCls: 'x-fa fa-pencil-square-o',\n                handler: function (grid, rowIndex, colIndex) {\n                    grid.editingPlugin.startEdit(rowIndex, 0);\n                }\n            }\n        ]\n    }]\n});\n\n```\n\nExample result (on editing mode):\n\n![Example result](demo/img/demo.png)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaltempi%2Fextjs-action-column-row-editing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaltempi%2Fextjs-action-column-row-editing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaltempi%2Fextjs-action-column-row-editing/lists"}