2014-01-23 103 views
0

在面板ReferenceError我想從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); 
    } 
    }); 

回答

0

Store中的參考形式面板對象this而不是使用一個局部變量:

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

(你也必須更換進一步引用在initComponent與this.fileConnDetails變量)

然後,按照您的建議,將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 
}] 
+0

獲取以下錯誤。 TypeError:this.fileConnDetails未定義 var form = this.fileConnDetails.getForm(); //獲取表單詳細信息 – user3176314

+0

對不起,發生錯誤的更新...明白了!!!正常工作...感謝您的幫助.. – user3176314

0

getFileType是你的類的一部分。您需要添加:

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

不起作用...再次引發同樣的錯誤 – user3176314

+0

您已經有了對錶單'databaseConnDetails'。 –

+0

它與馬特的建議合作。看起來問題是getFileType是mainPanel的一部分。 this.getFileType,仍然無法找到範圍。在將它包含在fileConnDetails中之後,它們都在相同的範圍內。 – user3176314