「這個」不解決正確/提交處理程序在煎茶觸摸的JavaScript

Question

我想創建通過煎茶觸摸的形式，只是簡單地採用文本，用戶進入並做了網站上的職位搜索。雖然一切正常工作，包括重置按鈕，但每當我在submitbuttonhandler中this.getComponent('keywords')它給我一個錯誤說未捕獲

TypeError：對象＃沒有方法'getComponent'。 Ext.ns（'SearchJobsForm'）; //註冊我們的命名空間

var resetButtonHandler = function (btn, evt) { 
this.getComponent('keywords').reset(); 
this.getComponent('dposted').reset(); 
this.getComponent('jtitle').reset(); 
this.getComponent('jcategory').reset(); 
this.getComponent('salaryf').reset(); 
this.getComponent('salaryt').reset(); 
this.getComponent('jscategory').reset(); 
this.getComponent('ptype').reset(); 
} 

這是問題的代碼塊。以下代碼塊不能解決上述重置按鈕處理程序的「this」問題。

 var submitButtonHandler = function(btn,evt) { 
     var temp = this.getComponent('keywords').getValue(); 
     //query('#jcategory').getValue(); 
     alert(temp); 
     //alert('In Progress'); 
     } 

以下只是創建表單。

 SearchJobsForm.form = Ext.extend(Ext.Panel,{ 

      initComponent: function(){ 

       Ext.apply(this, { 
        floating: true, 
        width: 250, 
        height: 370, 
        scroll: 'vertical', 
        centered: true, 
        modal: true, 
        hideOnMaskTap: false, 
        items: [{ 
        xtype: 'textfield', 
        itemId: 'keywords', 
        label: 'Keywords', 
        labelAlign: 'top', 
        labelWidth: '100%', 
        name: 'Keywords' 
        },{ 
        xtype: 'textfield', 
        label: 'Job Title', 
        itemId: 'jtitle', 
        labelAlign: 'top', 
        labelWidth: '100%', 
        name: 'Job Title' 
        },{ 
        xtype: 'selectfield', 
        label: 'Job Category', 
        itemId: 'jcategory', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '-- ANY --', value: 'ANY' 
         }, { 
          text: 'Technical', value: 'Technical' 
         }, { 
          text: 'Non-Technical', value: 'Non-Technical' 
         }, { 
          text: 'Tech Start-up', value: 'Tech Start-up' 
         }, { 
          text: 'Life Science', value: 'Life Science' 
         }, { 
          text: 'Digital Media', value: 'Digital Media' 
         }, { 
          text: 'Accelerator Centre', value: 'Accelerator Centre' 
         } 
         ] 
        },{ 
        xtype: 'selectfield', 
        label: 'Job Sub-Category', 
        itemId: 'jscategory', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '-- ANY --', value: 'ANY' 
         }, { 
          text: 'Developer', value: 'Developer' 
         }, { 
          text: 'Quality Assurance', value: 'Quality Assurance' 
         }, { 
          text: 'Project Manager', value: 'Project Manager' 
         }, { 
          text: 'Tester', value: 'Tester' 
         }, { 
          text: 'IT Help Desk', value: 'IT Help Desk' 
         }, { 
          text: 'Health Care', value: 'Health Care' 
         }, { 
          text: 'Transportation and Logistics', value: 'Transportation and Logistics' 
         }, { 
          text: 'Management', value: 'Management' 
         }, { 
          text: 'Network', value: 'Network' 
         }, { 
          text: 'Administration', value: 'Administration' 
         }, { 
          text: 'General', value: 'General' 
         } 
         ] 
        },{ 
        xtype: 'selectfield', 
        label: 'Position Type', 
        itemId: 'ptype', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '-- ANY --', value: 'ANY' 
         }, { 
          text: 'Part Time', value: 'Part Time' 
         }, { 
          text: 'Part Time Contract', value: 'Part Time Contract' 
         }, { 
          text: 'Full Time', value: 'Full Time' 
         }, { 
          text: 'Full Time Contract', value: 'Full Time Contract' 
         } 
         ] 
        },{ 
        xtype: 'selectfield', 
        label: 'Salary (CAD$): From', 
        itemId: 'salaryf', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '-- ANY --', value: 'ANY' 
         }, { 
          text: '20000', value: '20000' 
         }, { 
          text: '30000', value: '30000' 
         }, { 
          text: '40000', value: '40000' 
         },{ 
          text: '50000', value: '50000' 
         }, { 
          text: '60000', value: '60000' 
         }, { 
          text: '70000', value: '70000' 
         }, { 
          text: '80000', value: '80000' 
         }, { 
          text: '90000', value: '90000' 
         }, { 
          text: '100000', value: '100000' 
         }, { 
          text: '100000+', value: '100000+' 
         } 

         ] 
        },{ 
        xtype: 'selectfield', 
        label: 'to', 
        itemId: 'salaryt', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '-- ANY --', value: 'ANY' 
         }, { 
          text: '20000', value: '20000' 
         }, { 
          text: '30000', value: '30000' 
         }, { 
          text: '40000', value: '40000' 
         },{ 
          text: '50000', value: '50000' 
         }, { 
          text: '60000', value: '60000' 
         }, { 
          text: '70000', value: '70000' 
         }, { 
          text: '80000', value: '80000' 
         }, { 
          text: '90000', value: '90000' 
         }, { 
          text: '100000', value: '100000' 
         }, { 
          text: '100000+', value: '100000+' 
         } 
         ] 
        },{ 
        xtype: 'selectfield', 
        label: 'Posted in last (Days):', 
        itemId: 'dposted', 
        labelAlign: 'top', 
        labelWidth: '100%', 
         options: [{ 
          text: '30', value: '30' 
         }, { 
          text: '60', value: '60' 
         }, { 
          text: '90', value: '90' 
         } 
         ] 
        } 
         ], 
         dockedItems: [{ 
             xtype: 'toolbar', 
             itemId: 'toolbar', 
             dock: 'bottom', 
             height: '36', 
             items: [ 
               { xtype: 'button', text: 'Reset',itemId: 'reset',scope: this, 
               handler: resetButtonHandler }, 
               { xtype: 'spacer'}, 
               { xtype: 'button', text: 'Submit', 
               handler: submitButtonHandler 
               } 
               ] 
            }] 


       }); 


       SearchJobsForm.form.superclass.initComponent.call(this); 

       // alert(SearchJobsForm.form.getValues(true)); 

       this.items.get(2).on({ 
        change: this.onChange, 
        scope: this 
       }); 



      }, 


      onChange: function(selectField, value){ 
       this.items.get(1).disable(); 
      } //end of function onChange 

     }); 



     Ext.setup({ 
      tabletStartupScreen: 'tablet_startup.png', 
      phoneStartupScreen: 'phone_startup.png', 
      icon: 'icon.png', 
      glossOnIcon: false, 
      onReady: function(){ 

       var form = new SearchJobsForm.form(); 
       form.show();     

      } 
     }); 

Answer 1

this.getComponent（childId）瀏覽當前對象的子組件。在resetButtonHandler（）中，應將此視爲重置按鈕。

SearchJobsForm是一個對象不是它的實例的聲明。否則，你會使用「新」命令。 SearchJobsForm.fieldName不引用字段。所以，在submitButtonHandler（）方法的上下文中，這個等價於：Ext.getCmp（'reset'）;

可以使用ID場（不的itemId）組件來解決它在一個快速和骯髒的方式：

SearchJobsForm.form = Ext.extend（Ext.Panel，{

initComponent: function(){ 
    Ext.apply(this, { 
    id: 'form', // add an id to use Ext.getCmp()    
    floating: true, 
    ... 
    } 
}); 

// So later you can use 
Ext.getCmp('keywords') 

還是從resetButton上下文形式面板一路走up，然後down到輸入關鍵字。沒有必要在這種情況下，添加一個屬性。

var form = this.el.up('.x-panel'); 
var input_keyword = form.down('.x-input-text[name=Keywords]').getValue(); 

問候