); Ext.define('MyApp.plugin.Clearable', extend: 'Ext.plugin.Abstract', alias: 'plugin.clearable', init: function(field) this.field = field; field.on('afterrender', this.addClearButton, this); ,
showDetail: function(row, record) var detailDiv = Ext.DomHelper.append(row.parentNode, tag: 'div', cls: 'x-row-expander-detail', html: '<div class="detail-content">Details for ' + record.get('name') + '</div>' , true); detailDiv.setWidth(row.offsetWidth); ,
clearField: function() this.field.setValue(''); this.field.focus(); , extjs plugins
Inside the plugin's init method, the plugin gains access to the host component, attaches event listeners, overrides methods (carefully), or adds new methods/properties. ExtJS provides several powerful built-in plugins. Here are the most useful ones: Grid Plugins | Plugin | Purpose | |--------|---------| | Ext.grid.plugin.CellEditing | Inline cell editing | | Ext.grid.plugin.RowEditing | Inline row editing (edit entire row at once) | | Ext.grid.plugin.RowExpander | Add expandable row details | | Ext.grid.plugin.BufferedRenderer | Render only visible rows for large datasets | | Ext.grid.plugin.HeaderReorderer | Allow column reordering (often enabled by default) | | Ext.grid.plugin.ColumnResizing | Allow column resizing | | Ext.grid.plugin.MultiSelection | Enhanced multi-selection (checkbox selection model) | | Ext.grid.plugin.PagingToolbar | Paging for grid (often a separate toolbar) | Form/Field Plugins | Plugin | Purpose | |--------|---------| | Ext.form.FieldSet (not a plugin) | – | | Ext.form.action.StandardSubmit | Submit form as standard browser POST | | Ext.plugin.Clearable | Add clear icon to text fields | | Ext.form.plugin.FieldLabels | Advanced label management | Panel/Container Plugins | Plugin | Purpose | |--------|---------| | Ext.plugin.Viewport | Manage viewport resizing (rarely used directly) | | Ext.plugin.Responsive | Responsive configurations based on component size | | Ext.plugin.LazyItems | Lazy rendering of child items | DataView Plugins | Plugin | Purpose | |--------|---------| | Ext.dataview.plugin.ListPaging | Infinite/paged list loading (touch/modern) | 4. Creating a Custom Plugin Basic Structure Ext.define('MyApp.plugin.DebugPlugin', extend: 'Ext.plugin.Abstract', alias: 'plugin.debugger', // allows type: 'debugger' in config // Configurations with getter/setter config: logEvents: true ,
); You can add methods directly to the host instance: ); Ext
updateButtonVisibility: function(field, newVal) this.clearBtn.setVisible(!Ext.isEmpty(newVal));
init: function(grid) this.grid = grid; grid.addCls('grid-with-expander'); // Add a new column for expand/collapse grid.reconfigure(grid.getStore(), [ xtype: 'actioncolumn', width: 30, items: [ iconCls: 'x-fa fa-plus', handler: this.toggleRow.bind(this) ] ].concat(grid.getColumns())); if (this.getExpandOnDblClick()) grid.on('itemdblclick', this.onItemDblClick, this); , Creating a Custom Plugin Basic Structure Ext
1. What is an ExtJS Plugin? In ExtJS, a Plugin is a class that encapsulates reusable functionality, which can be dynamically added to a component (like a Grid, Form, or Panel) at runtime or design time. Unlike a component's subclass (e.g., Ext.grid.Panel ), a plugin does not inherit from the host component. Instead, it "plugs into" the component's lifecycle and event system to augment its behavior.