1. Override the InitComponent () method, and in the method call the InitComponent () method of the parent class. such as: Subclass.superclass.initComponent.call (this);
2. In InitComponent, the following statement appears, overriding the Parent class attribute ext.apply (this, { title: "AAA"});
3. The basic template code is as follows: Ext.ns ("my.component"); My.component.MyGridPanel = Ext.extend (ext.gridpanel,{/** * Initialize component */initcomponent: function () {//Data Warehouse var store = this.store;if (!store) {store = This.buildstore (this.baseparams);} Column model var cm = This.cm;if (!cm) {cm = THIS.BUILDCM ();} check box. Component properties use Selmodel to configure var sm = new Ext.grid.CheckboxSelectionMedol (); Ext.apply (this, {//This adds the component's properties selmodel:sm,//the Pagination toolbar bbar:new Ext.pagingtoolbar ({}), Colmodel:new Ext.grid.ColumnModel ({ This adds the properties of the column model COLUMNS:CM;}),//Set listener listeners for the component: {"Dbclick": Function () {}, "Rowclick": Function () {},......}}); My.component.MyGridPanel.superclass.initComponent.apply (this);},/** * Build Store */buildstore:function (baseparams) { Ext.apply (Baseparams, {//Paging condition}), return new Ext.data.JsonStore ({URL: "", Idproperty: "",//id attribute value configuration totalproperty: "",// Autoload:boolean,root: The root of "data"//, followed by an array of JSON-formatted objects. Fields: [{name: "", Mapping: ""},{name: "", Mapping: "},......]}),},/** * Build data column */buildcm:function () {return [{Name : "", Dataindex : "},{name:" ", Dataindex:"}];},//gets the selected record by selecting the model. is multiple getselections:function () {var records = This.getselectionmodel (). Getselections (); Return records;} Gets the selected record by selecting the model. There is only one getselected:function () {var record = This.getselectionmodel (). getselected ();});
ExtJS Component Inheritance Template description (take Gridpanel as an example)