ReferenceError in panel due to scope - button

Question

I'm trying to call a function from initComponent. However, I'm unable to get the scope of this object, thus running into ReferenceErrors.
The function I'm calling is getFileType and it's missing the scope and I'm unable to get it. (line nos: 204).
Is there a way to change scope inside the handler.
Also, by adding scope:this inside the button, I'm losing scope to pick the form data...
Any help here would be awesome!
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

Store the reference to the form panel object in this instead of using a local variable:
this.fileConnDetails = Ext.create('Ext.form.Panel', {
(you'll also have to replace further references to that variable in initComponent with this.fileConnDetails)
Then, as you suggested, add scope: this to your button. You'll then have both the form panel and your functions in the same scope:
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 is part of your class. You need to add:
scope: this,
handler: function() {
// ....
this.getFileType();
}