定义新的 xtype 字段 sencha touch MVC

Question

我必须在我的 sencha 应用程序中创建一个新的 xtype，但我不知道我必须将代码放在哪里。我尝试创建一个新文件并将其添加到 app.js 中的视图数组中，但它不起作用，因为我的新 xtype 是一个字段而不是视图

Ext.define('Dynamo.field.PatternText', {
extend : 'Ext.field.Text',
xtype  : 'patterntextfield',

config : {
    pattern : '[0-9]*'
},

updatePattern : function(pattern) {
    var component = this.getComponent();

    component.updateFieldAttribute('pattern', pattern);
},

initialize : function() {
    this.callParent();

    var component = this.getComponent();

    component.input.on({
        scope   : this,
        keydown : 'onKeyDown'
    });
},

onKeyDown : function(e) {
    var code = e.browserEvent.keyCode;

    if (!(code >= 48 && code <= 57) && !(code >= 97 && code <= 105) && code !== 46 && code !== 8 && code !== 188 && code != 190) {
        e.stopEvent();
    }
}

});

Answer 1

通常，定制组件在 Ext.ux 命名空间下声明。

只要正确配置Ext.Loader，就可以将文件放在任何地方：

Ext.Loader.setConfig({
    enabled : true,
    paths: {      
        'Ext.ux' : 'js/ux'
    }
});

使用此配置，您可以将所有自定义组件放入 js/ux 文件夹以进行自动加载。对于这个特定文件，路径为 js/ux/Field/PatternText.js

您还需要使用正确的命名空间来扩展字段：

Ext.define('Ext.ux.field.PatternText', {
    extend : 'Ext.form.field.Text',

定义新的 xtype 字段 sencha touch MVC

Define new xtype fields sencha touch MVC

model-view-controller

field

extjs

touch

xtype