I am trying to create a form through sencha touch that simply takes the text that the user enters and does a search for jobs on a website. Although everything else is working properly including the reset button but whenever I do this.getComponent('keywords') in the submitbuttonhandler it gives me an error saying Uncaught
TypeError: Object # has no method ‘getComponent’.
Ext.ns(‘SearchJobsForm’); // register our namespace
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();
}
Here is the block of code that is the problem. The following block of code is not resolving ‘this’ the way reset button handler above is.
var submitButtonHandler = function(btn,evt) {
var temp = this.getComponent('keywords').getValue();
//query('#jcategory').getValue();
alert(temp);
//alert('In Progress');
}
The following is just creating 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: [{
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();
}
});
this.getComponent(childId) browses through the children components of the current object. In resetButtonHandler(), this should be considered as the reset button.
SearchJobsForm is the declaration of an object not its instance. Otherwise you would have used the “new” command. SearchJobsForm.fieldName doesn’t refers to a field.
So, in the submitButtonHandler() method’s context, this is equivalent to : Ext.getCmp(‘reset’);
You can use the id field (not itemId) of the component to address it in a quick and dirty way :
SearchJobsForm.form = Ext.extend(Ext.Panel,{
Or go all the way up from the resetButton context to the form panel and then down to the input keywords. No need to add an attribute in this case.
Regards