关于XTYPE

最新推荐文章于 2021-10-18 15:03:17 发布

原创最新推荐文章于 2021-10-18 15:03:17 发布 · 536 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

extjs

xtype : Ext.enums.Widget

这个属性为一个完整的类名提供了一个简化的短语表达形式。Item对象的完整语句如下所示：

 items: [
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Foo'
     }),
     Ext.create('Ext.form.field.Text', {
         fieldLabel: 'Bar'
     }),
     Ext.create('Ext.form.field.Number', {
         fieldLabel: 'Num'
     })
 ]

使用xtype属性的表达形式：

 items: [
     {
         xtype: 'textfield',
         fieldLabel: 'Foo'
     },
     {
         xtype: 'textfield',
         fieldLabel: 'Bar'
     },
     {
         xtype: 'numberfield',
         fieldLabel: 'Num'
     }
 ]

使用 Ext.container.AbstractContainer.defaultType 可以更简单的概括item对象中的xtype属性：

 defaultType: 'textfield',
 items: [
     { fieldLabel: 'Foo' },
     { fieldLabel: 'Bar' },
     { fieldLabel: 'Num', xtype: 'numberfield' }
 ]

I tems下的每一条数据都相当于一个配置对象，被用来创建一个实例。使用Ext.widget: 可以实例化一个对象。

 var text1 = Ext.create('Ext.form.field.Text', {
     fieldLabel: 'Foo'
 });

 // or alternatively:

 var text1 = Ext.widget({
     xtype: 'textfield',
     fieldLabel: 'Foo'
 });

可以使用Ext.define 创建一个xtype类。

You can define your own xtype on a custom component by specifyingthe xtype property in Ext.define. For example:

Ext.define('MyApp.PressMeButton', {
    extend: 'Ext.button.Button',
    xtype: 'pressmebutton',
    text: 'Press Me'
});

注意当使用Ext.define 创建一个xtype类时，为避免重复，应使用以下三个属性：

Ext.define('Foo.form.CoolButton', {
    extend: 'Ext.button.Button',
    xtype: 'ux-coolbutton',
    text: 'Cool!'
});

可用于 2.3.0及以上版本。

标签

#extjs