创造自己的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，就是这么简单便捷！