PDA

View Full Version : Calling Components instead of using Ext.getCmp?



wisu
4 Jul 2011, 5:27 PM
Hi all... the following code refers to the excellent ToolbarDemo video and sample code by @nelstrom



ToolbarDemo.views.Settingscard = Ext.extend(Ext.form.FormPanel, {
id: "form",
title: "settings",
iconCls: "settings",
scroll: "vertical",
initComponent: function() {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Settings"
}],
items: [
{
xtype: 'fieldset',
title: 'Details',
items: [{
xtype: 'textfield',
name : 'name',
label: 'Username'
},{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}],
},{
xtype: 'button',
text: 'save',
ui: 'confirm',
handler: function(){
Ext.Ajax.request({
url : 'http://myapp.local/login',
params : {
name : Ext.getCmp("form").getValues().name,
password : Ext.getCmp("form").getValues().password
}
});
}
}]
});
ToolbarDemo.views.Settingscard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('settingscard', ToolbarDemo.views.Settingscard);
the above code works, but I read elsewhere that it is better not to use Ext.getCmp...
Any ideas on how to call the form components without using Ext.getCmp?

Thanks...

:)

Hanni Sullivan
4 Jul 2011, 10:53 PM
Maybe I'm missing something here, but I don't see a need for either Ext.geCmp or any alternative in your case.
Since "Settingscard" extends the Ext.form.FormPanel it can simply call the getValues method of the superclass.
Like this:


{
xtype: 'button',
text: 'save',
ui: 'confirm',
handler: function() {
// calls the getValues of the superclass
console.dir(this.getValues());
Ext.Ajax.request({
url : 'http://myapp.local/login',
params : {
name : Ext.getCmp("form").getValues().name,
password : Ext.getCmp("form").getValues().password
}
});
},
// sets the scope of the function to the form panel.
scope: this
}


If you take a look at the output of "this.getValues()" it has the exact format you want. So you could just write:



Ext.Ajax.request({
url : 'http://myapp.local/login',
params : this.getValues()
});


But to present an alternative to Ext.getCmp, you could use the down method like this:


KoelnApp.View.Settingscard = Ext.extend(Ext.form.FormPanel, {
id: "form",
title: "settings",
iconCls: "settings",
scroll: "vertical",
initComponent: function() {
Ext.apply(this, {
dockedItems: [
{
xtype: "toolbar",
title: "Settings"
}
],
items: [
{
xtype: 'fieldset',
title: 'Details',
items: [
{
xtype: 'textfield',
name : 'name',
//Setting an item id to use with the down method
itemId: 'namefield',
label: 'Username'
},
{
xtype: 'passwordfield',
name : 'password',
//Setting an item id to use with the down method
itemId: 'passwordfield',
label: 'Password'
}
],
},
{
xtype: 'button',
text: 'save',
ui: 'confirm',
handler: function() {
Ext.Ajax.request({
url : 'http://myapp.local/login',
params : {
//using the down method
name : this.down('#namefield').getValue(),
password : this.down('#passwordfield').getValue()
}
});
},
scope: this
}
]
});
KoelnApp.View.Settingscard.superclass.initComponent.apply(this, arguments);
}
});