由于作用域原因，面板中的ReferenceError

Question

我正在尝试从initComponent调用一个函数。但是，我无法获得这个对象的作用域，因此遇到了ReferenceErrors。我调用的函数是getFileType，它缺少作用域，所以我无法获取它。(线号: 204)。有没有办法改变处理程序内部的作用域。

另外，通过在按钮中添加作用域，我失去了挑选表单数据的作用域...

这里的任何帮助都会很棒！

Ext.define('D.application.component.de.AddConnectionPanel', {
extend: 'Ext.form.FieldSet',

initComponent : function()
    {
            var databaseConnDetails = Ext.create('Ext.form.Panel',{
                            bodyPadding: 15,
                        //  width:'auto',
                            region:'center',
                            layout:{
                                align: 'center',
                            },
                            defaults: {
                                anchor: '100%',
                            },
                            title: 'Database Details',
                            items: [{
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqcombobox',
                                            name: 'DB_TYPE',
                                            emptyText: 'DB Type',
                                            flex: 1,
                                            fieldID: 'Field-1',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_1',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_URL',
                                            emptyText: 'DB Url',
                                            flex: 1,
                                            fieldID: 'Field-2',
                                    },
                                    {
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_PORT',
                                            emptyText: 'DB Port',
                                            flex: 1,
                                            fieldID: 'Field-3',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_2',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_SCHEMA',
                                            emptyText: 'Schema Name',
                                            flex: 1,
                                            fieldID: 'Field-4',
                                    },
                                    {
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_LABEL',
                                            emptyText: 'Schema Label',
                                            flex: 1,
                                            fieldID: 'Field-6',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_4',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextarea',
                                            name: 'DB_DESCRIPTION',
                                            emptyText: 'Connection Description',
                                            flex: 1,
                                            fieldID: 'Field-6',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_6',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_USERNAME',
                                            emptyText: 'DB Username',
                                            flex: 1,
                                            fieldID: 'Field-5',
                                    },
                                    {
                                            readOnly: false,
                                            hidden: false,
                                            xtype: 'dsqtextfield',
                                            name: 'DB_PASSWORD',
                                            inputType: 'password',
                                            emptyText: 'DB Password',
                                            flex: 1,
                                            fieldID: 'Field-6',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_7',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                            readOnly: true,
                                            hidden: true,
                                            xtype: 'dsqtextfield',
                                            name: 'ID',
                                            emptyText: 'Connection ID',
                                            flex: 1,
                                            fieldID: 'Field-6',
                                    }],
                                    layout: 'hbox',
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_8',
                            },
                            {
                                    defaults: {

                                    },
                                    items: [{
                                        readOnly: false,
                                        hidden: false,
                                        width:70,
                                        xtype: 'dsqbutton',
                                        name: 'save',
                                        fieldLabel: 'Save',
                                        fieldID:'Field-8',
                                    }],
                                    layout: {
                                        type: 'hbox',
                                        align: 'middle',
                                        pack: 'center'
                                    },
                                    xtype: 'dsqfieldcontainer',
                                    layoutID: 'Contain_9',
                            }],
                            xtype: 'dsqfieldset',
                            layoutID: 'Connection Details'
            }); 

            var fileConnDetails = Ext.create('Ext.form.Panel', {
                            bodyPadding:15,
                            defaults: {
                                anchor:'100%',
                            },
                            width:500,
                            title: 'File Details',
                            bodyPadding: 10,
                            frame: true,
                            renderTo: Ext.getBody(),
                            items: [{
                                xtype: 'filefield',
                                name: 'InputFile',
                                id:'filefield',
                                emptyText: 'File',
                                msgTarget: 'side',
                                allowBlank: false,
                                anchor: '100%',
                                buttonText: 'Browse...'
                            }],

                            buttons: [{
                                text: 'Upload',
                                layout:{
                                    pack:'center',
                                    align:'middle',
                                },
                                handler: function() {
                                    var form = this.up('form').getForm(); // Get form details 
                                    if(form.isValid()){
                                        var fileName = form.findField('filefield').getSubmitValue();                                    
                                        // Check to see if file type is supported
                                        var retVal = getFileType(fileName);
                                        if (retVal != DSQ_SUCCESS){
                                            Ext.Msg.alert('Unsupported File Type');
                                            return;
                                        }

                                        // Parse file and read data
                                        retVal = parseInputFile(fileName, fileArray);
                                        if (retVal != DSQ_SUCCESS) {
                                            Ext.Msg.alert('Error! unable to read file');
                                            return;
                                        }

                                        form.submit({
                                            success: function(fp, action) {
                                                Ext.Msg.alert('Success', 'Your file "' + action.result.file + '" has been uploaded.');
                                            },
                                            failure: function(fp, action) {
                                                Ext.Msg.alert('Failed', 'File "' + action.result.file + '"  upload failed');
                                            }
                                        });
                                    }
                                }
                            }]                              
            });

            var connectionInfo = Ext.create('Ext.container.Container', {
                    autoEl:'div',
                    width:700,
                    bodyPadding: 5,  // Don't want content to crunch against the borders
                    layout:'card',
                    items:[{
                        id:'file_card',
                        items:[fileConnDetails],
                    },{
                        id:'db_card',
                        items:[databaseConnDetails],
                    }],
            });

            var DataSourceOptionsContainer = Ext.create('Ext.container.Container',{
                    region:'center',
                    layout:{
                        type:'vbox',
                        align: 'center',
                    },
                    items : [{
                        xtype:'radiogroup',
                        vertical:false,
                        columns:2,
                        items: [{
                                boxLabel: 'Flat-File',
                                name:'datasource',
                                inputValue:'flatfile',
                                width:80,
                                checked:true,
                            },{
                                boxLabel: 'Database',
                                name:'datasource',
                                inputValue:'database',
                                width:80
                        }],
                        listeners: {
                            change: function(radiogroup, newVal, oldVal) {
                                var listenerObj = newVal.datasource;
                                switch(listenerObj) {
                                    case 'database':
                                        connectionInfo.getLayout().setActiveItem('db_card');
                                        break;
                                    case 'flatfile':
                                        connectionInfo.getLayout().setActiveItem('file_card');
                                        break;
                                    default:
                                        console.log("No such Object in connection group");
                                        break;
                                }
                            }
                        }
                    }],
            });

            var config = {
                    items: [DataSourceOptionsContainer, connectionInfo]
            };

            Ext.apply(this,config);
            this.callParent(arguments);
    },
    getFileType: function(fileName) 
    {
        var fileTypesAllowed = [".csv", ".xls", ".xlsb"];
        alert("File Type verification");
        if(!Ext.Array.contains(fileTypesAllowed, fileName)) {
            return 1;
        }
        return 1;
    },      
    parseInputFile: function(fileName, fileArray)
    {
        return 1;
    },
    onRender : function()
    {
            this.callParent(arguments);
    }
  });

Answer 1

将对表单面板对象的引用存储在this中，而不是使用局部变量：

this.fileConnDetails = Ext.create('Ext.form.Panel', {

(您还必须用this.fileConnDetails替换initComponent中对该变量的进一步引用)

然后，按照您的建议，将scope: this添加到您的按钮。然后，您将在同一范围内拥有表单面板和函数：

buttons: [{
    text: 'Upload',
    layout:{
        pack:'center',
        align:'middle',
    },
    handler: function() {
        var form = this.fileConnDetails.getForm(); // Get form details 
        if(form.isValid()){
            var fileName = form.findField('filefield').getSubmitValue();                                    
            // Check to see if file type is supported
            var retVal = this.getFileType(fileName);
            if (retVal != DSQ_SUCCESS){
                Ext.Msg.alert('Unsupported File Type');
                return;
            }

            // Parse file and read data
            retVal = this.parseInputFile(fileName, fileArray);
            if (retVal != DSQ_SUCCESS) {
                Ext.Msg.alert('Error! unable to read file');
                return;
            }

            form.submit({
                success: function(fp, action) {
                    Ext.Msg.alert('Success', 'Your file "' + action.result.file + '" has been uploaded.');
                },
                failure: function(fp, action) {
                    Ext.Msg.alert('Failed', 'File "' + action.result.file + '"  upload failed');
                }
            });
        }
    },
    scope: this
}]

Answer 2

getFileType是您的类的一部分。您需要添加：

scope: this,
handler: function() {
    // ....
    this.getFileType();
}