I am currently working on developing a form using Sencha Touch that is designed to allow users to enter text and conduct a job search on a website. While most of the functionality is in place, including the reset button, I encounter an error when attempting this.getComponent('keywords') in the submitButtonHandler function, resulting in an Uncaught TypeError.
The issue seems to stem from the lack of proper resolution for 'this' within the code block below:
var submitButtonHandler = function(btn, evt) {
var temp = this.getComponent('keywords').getValue();
alert(temp);
}
Here is the snippet of problematic code. Unlike the resetButtonHandler above, this code fails to resolve 'this' correctly.
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();
}
The following section simply defines the structure of the form:
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: [{
// Form fields go here
},{
// Additional form fields
}],
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);
this.items.get(2).on({
change: this.onChange,
scope: this
});
},
onChange: function(selectField, value){
this.items.get(1).disable();
}
});
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var form = new SearchJobsForm.form();
form.show();
}
});