PDA

View Full Version : MVC and Object Access. Am I Doing it Right?



chemicaloli
21 Jun 2011, 6:17 AM
I have a button (called lovelyButton) inside a fieldset inside form.FormPanel in a View, like this...


application.views.Login = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
align: 'stretch'
},
initComponent: function() {
this.loginPanel = new Ext.form.FormPanel({
submitOnAction: true,
defaults: {
required: true,
useClearIcon: true
},
items: [{
xtype: 'fieldset',
title: 'Login',
itemId: 'testClear',
items: [{
xtype: 'textfield',
name: 'username',
placeHolder: 'Username',
allowBlank: false
},{
xtype: 'button',
ui: 'decline',
text: 'submit',
itemId: 'lovelyButton'
}
}]
}]
});

this.items = this.loginPanel;

application.views.Login.superclass.initComponent.apply(this, arguments)
}
});

Ext.reg('login-panel', application.views.Login);
console.log('login-panel view registered');

How do I actually do stuff with it? Adding code to the View in order to make it do stuff doesn't seem to work (for instance handlers are not fired, I imagine because the View is essentially a template) but if I want to access the button from the Controller I have to do things like this...


login: function() {
this.loginPanel = this.render({
xtype: 'login-panel',
cardSwitchAnimation: 'slide',
listeners: {
activate: function() {
console.log('ACTIVATED login');
var myButton = this.loginPanel.getComponent('testClear').getComponent('lovelyButton');
myButton.setText("Something")
},
deactivate: function (p)
{
console.log("DEACTIVATED login")
p.destroy();
}
}
})
}

Which is quite nasty. Using Ext.getCmp('lovelyButton') doesn't work either. Is there a simpler way to do stuff with an instantiated View or am I stuck with sort of code in the above snippet?

digil
21 Jun 2011, 7:02 AM
instead of itemId : 'lovelyButton' try id : 'lovelyButton' and Ext.getCmp('lovelyButton') should work.

chemicaloli
21 Jun 2011, 7:09 AM
instead of itemId : 'lovelyButton' try id : 'lovelyButton' and Ext.getCmp('lovelyButton') should work.

This = win. Thanks!

digil
21 Jun 2011, 7:15 AM
Just FYI (I think you did a similar thing yesterday), itemId is used just to give a name to the div that is generated in the DOM, so you can tie it to CSS. id does the same thing, but it is also registered in the ComponentMgr so that Ext.getCmp() works (its fast too, since the references is stored in the Mgr instead of looking in the DOM).

chemicaloli
21 Jun 2011, 7:19 AM
Just FYI (I think you did a similar thing yesterday), itemId is used just to give a name to the div that is generated in the DOM, so you can tie it to CSS. id does the same thing, but it is also registered in the ComponentMgr so that Ext.getCmp() works (its fast too, since the references is stored in the Mgr instead of looking in the DOM).

Brilliant, that's much easier than fishing about in object space for a reference to something buried 10 deep in a stupidly over-nested panel.