创造自己的xtype

在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，就是这么简单便捷！