Extjs - 未捕获TypeError：无法读取null的属性'init'

Question

我正在尝试使用Extjs脚本创建一个简单的表单。由于Chrome控制台上的此错误，我无法看到输出： -

**Uncaught TypeError: Cannot read property 'init' of null ext-all.js:21**
Ext.cmd.derive.create ext-all.js:21
Ext.cmd.derive.constructPlugin ext-all.js:21
Ext.cmd.derive.constructPlugins ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.initComponent ext-all.js:21
Ext.cmd.derive.constructor ext-all.js:21
b.implement.callParent ext-all.js:21
Ext.cmd.derive.constructor ext-all.js:21
A ext-all.js:21
Ext.apply.widget ext-all.js:21
Ext.application.launch app1.js:30
Ext.cmd.derive.onBeforeLaunch ext-all.js:21
Ext.cmd.derive.constructor ext-all.js:21
j ext-all.js:21
(anonymous function) ext-all.js:21
(anonymous function) ext-all.js:21
fire ext-all.js:21
Ext.apply.readyEvent.j.fire ext-all.js:21
Ext.apply.fireReadyEvent ext-all.js:21
(anonymous function)

如果我导入 ext-all-debug.js 或 ext-debug.js ，则错误消失，但控制台上会显示另外两个错误。请找到错误： -

**Uncaught TypeError: Object prototype may only be an Object or null ext-all-debug.js:19552**
(anonymous function) ext-all-debug.js:19552
classReady ext-all-debug.js:5401
Ext.ClassManager.onCreated ext-all-debug.js:5016
Ext.ClassManager.createOverride ext-all-debug.js:5409
Ext.apply.define ext-all-debug.js:5727
(anonymous function) ext-all-debug.js:18865
**Uncaught TypeError: Object [object Object] has no method 'addCls' ext-all.js:21**
d ext-all.js:21
(anonymous function) ext-all.js:21
fire ext-all.js:21
Ext.apply.readyEvent.j.fire ext-all.js:21
Ext.apply.fireReadyEvent ext-all.js:21
(anonymous function)

请查找我的Extjs代码： -

Ext.Loader.setConfig({
    enabled: true
});
//Ext.Loader.setPath('Ext.ux', 'extjs/src/ux');

Ext.require([
    'Ext.form.*',
    'Ext.layout.container.Column',
    'Ext.tab.Panel',
    //'*',
    'Ext.ux.*'
]);

Ext.onReady(function() {

    Ext.tip.QuickTipManager.init();

    var bd = Ext.getBody();

    /*
     * ================  Simple form  =======================
     */
    bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'simpleForm',
        //url: 'save-form.php',
        frame: true,
        title: 'Simple Form',
        bodyPadding: '5 5 0',
        width: 350,
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        plugins: {
            ptype: 'datatip'
        },
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            afterLabelTextTpl: required,
            name: 'first',
            allowBlank: false,
            qtip: 'Enter your first name'
        },{
            fieldLabel: 'Last Name',
            afterLabelTextTpl: required,
            name: 'last',
            allowBlank: false,
            qtip: 'Enter your last name'
        },{
            fieldLabel: 'Company',
            name: 'company',
            tooltip: "Enter your employer's name"
        }, {
            fieldLabel: 'Email',
            afterLabelTextTpl: required,
            name: 'email',
            allowBlank: false,
            vtype:'email',
            tooltip: 'Enter your email address'
        }, {
            fieldLabel: 'DOB',
            name: 'dob',
            xtype: 'datefield',
            tooltip: 'Enter your date of birth'
        }, {
            fieldLabel: 'Age',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100,
            tooltip: 'Enter your age'
        }, {
            xtype: 'timefield',
            fieldLabel: 'Time',
            name: 'time',
            minValue: '8:00am',
            maxValue: '6:00pm',
            tooltip: 'Enter a time',
            plugins: {
                ptype: 'datatip',
                tpl: 'Select time {date:date("G:i")}'
            }
        }],

        buttons: [{
            text: 'Save',
            handler: function() {
                this.up('form').getForm().isValid();
            }
        },{
            text: 'Cancel',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }]
    });
 simple.render(document.body);

 });