init: function(host) host.myNewMethod = this.myNewMethod.bind(this); , myNewMethod: function() console.log('Called from host component');
xtype: 'grid', plugins: [ type: 'toolbardock', position: 'top', items: [ text: 'Save' ] ] 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 , init: function(host) host
Start with built-in plugins, then gradually create custom plugins for cross-cutting concerns like validation, debugging, animations, or custom UI enhancements. Creating a Custom Plugin Basic Structure Ext
updateButtonVisibility: function(field, newVal) this.clearBtn.setVisible(!Ext.isEmpty(newVal));
init: function(form) this.form = form; form.on('beforeaction', this.onBeforeSubmit, this); ,
init: function(host) console.log('Plugin init on', host.$className); this.host = host; // ... rest