0

在一个自定义的 ExtJs 文件中，我找到了以下代码。实际上在下面的代码中做了什么。

此代码编写在 xtype.js 文件中，并包含在 jsp 页面中。

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

Ext.require([
    'Ext.form.field.ComboBox'
]);

Ext.define('Ext.ux.UDComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.udComboBox',
    directArgs : false,
    skipValue : false,
    firstOptionDefault : false,
    forceSelection : true,
    typeAhead : true,
    queryMode : 'local',
    triggerAction : 'all',
    selectOnFocus : true,
    allowBlank : false,
    emptyText : '-Select One-',
    valueField : '',
    lastQuery : '', // This is used with store.filter function.
    returnAsObject : true,
    fieldStyle: 'background-image: none;',
    msgTarget:'side',
    hideTrigger:false,// if true hide the drop down icon
    skipFirstOption : false
});

在我们的文件中，为了创建组合框，我们使用xtype: 'udComboBox'.

4

1 回答 1

0 
Ext.Loader.setPath('<TopLevel.path.NameSpace>', 'js/ext-ux'); }
// Namespace by convention should be in lower case
Ext.define('<TopLevel.path.NameSpace>.<ComponentName>', { 
     extend: 'Ext.form.field.ComboBox', 
     // alias by convention should be in lower case
     alias: 'widget.<componentname>'
});
}

  • 顶级命名空间和构造函数名称应为 UpperCamelCase

  • 别名 xtype 应为小写

因此，您的配置示例可以是：您的公司

// --Filename: app/js/components/UdComboBox.js <-Filename as Name
Ext.define('MyCompany.libs.UdComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.udcombobox',
    ....
});

// --Filename: app/app.js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyCompany.libs', 'js/components');

Ext.require([
        //This is only because we are instantiate by xtype, if you use Ext.create this is not need it.
        'MyCompany.libs.UdComboBox'
    ]);

Ext.onReady(function() {
        Ext.create("Ext.container.Viewport", {
            layout: 'fit',
             items : [{
                 xtype : "udcombobox"
             }]
         });
});

// --Filename: app/app2.js
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('MyCompany.libs', 'js/components');


Ext.onReady(function() {
        Ext.create("Ext.container.Viewport", {
            layout: 'fit',
             items : [{
                 xtype : "panel"
             }, 
             new Ext.Create('MyCompany.libs.UdComboBox',{
                ..config..
             })
            ]
         });
});
于 2015-03-04T15:48:08.840 回答