ExtJs中xtype与组件类的对应表

from:http://blog.163.com/jx_dream/blog/static/117056627201223091021410/

核心提示：我们在使用 ExtJs 创建组件时最容易理解的当然是用 new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件，比如在面板的 items 属性中，尤其是多个

我们在使用 ExtJs 创建组件时最容易理解的当然是用
new Ext.form.TextField({fieldLabel:'姓名', id:'name',width:120})；
我们还可以直接用 xtype(比如 TextField 对应的 xtype 是 textfield) 的对象形式来创建组件，比如在面板的 items 属性中，尤其是多个组件或需要写许多的 ExtJs 相关代码时就更值得推荐。我们来对照如下形式就知道了：

items[   

new Ext.form.TextField({fieldLabel:'姓名', id:'name', width:120}),     

new Ext.form.TextField({fieldLabel:'密码', id:'passwd', inputType:'password', width:120}),   

new Ext.form.DateField({fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120})   

]   

//替换成用 xtype 写法就如下(似乎只是免去了很多的 new ...)   

items[      

{xtype:'textfield', fieldLabel:'姓名', id:'name', width:120},      

{xtype:'textfield', fieldLabel:'密码', id:'passwd', inputType:'password', width:120},     

{xtype:'datefield', fieldLabel:'生日', id:'birth', format:'Y年m月d日', width:120}   

] 

写 ExtJs  相关代码多了就会用 xtype 的体会，下面是 ExtJs 中各组件的 xtype 与组件类的对应表。不包括 Ext.ux 命名空间中扩展的组件。其实在 Ext API 文档中有此列表，在 API 帮助中查找 Component 打该页面就能看到，即：http://www.extjs.com/deploy/dev/docs/output/Ext.Component.html。