updateButtonVisibility: function(field, newVal) this.clearBtn.setVisible(!Ext.isEmpty(newVal));
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 ,
xtype: 'grid', plugins: [ type: 'toolbardock', position: 'top', items: [ text: 'Save' ] ] extjs plugins
init: function(host) var originalMethod = host.someMethod; host.someMethod = function() // pre-processing var result = originalMethod.apply(this, arguments); // post-processing return result; ;
init: function(host) host.myNewMethod = this.myNewMethod.bind(this); , myNewMethod: function() console.log('Called from host component'); updateButtonVisibility: function(field, newVal) 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); ,
onHostDestroy: function() console.log('Component destroyed:', this.host.getId()); Creating a Custom Plugin Basic Structure Ext
onHostRender: function() console.log('Component rendered:', this.host.getId()); ,