在Ext组件中经常用到grid,form等,在这些组件的items中会出现xtype这样的东西,经常用到的比如说textfield,numberfield,datafield等等,但是能不能使用自己定义的xtype呢,显然是能的,从ext官方上面找到了答案。 现在要创建一个自己的xtype : 'personalgrid',是一种自定义的grid,希望在其他组件中按照如下的方式使用。
var win = new Ext.Window({ title:'Personnel' ,width:600 ,height:400 ,items:{xtype:'personnelgrid'} }); win.show();personnelgrid并不是Ext预置的xtype类型,怎么才能让Ext正确引用呢,就需要编写以下代码:
Application.PersonnelGrid = Ext.extend(Ext.grid.GridPanel, { border:false ,initComponent:function() { Ext.apply(this, { store:new Ext.data.Store({...}) ,columns:[{...}, {...}] ,plugins:[...] ,viewConfig:{forceFit:true} ,tbar:[...] ,bbar:[...] }); Application.PersonnelGrid.superclass.initComponent.apply(this, arguments); } // eo function initComponent ,onRender:function() { this.store.load(); Application.PersonnelGrid.superclass.onRender.apply(this, arguments); } // eo function onRender }); Ext.reg('personnelgrid', Application.PersonnelGrid);在这里,我们扩展了Ext.form.GridPanel,创建了一个新的类Application.PersonnelGrid。然后又使用Ext.reg()把这个新的类注册为新的xtype,就是这么简单便捷!