PDA

View Full Version : Controller logic



Johnbran
19 Apr 2012, 4:43 AM
Hello,
I am trying to understand the proper way to use the controller in Architect. I am having a hard time with understanding the purpose of controller and application actions. I currently have a form with two buttons. I have setup a controller action to intercept button clicks. The problem is, the event fires when either button is pressed. I can't find a way to tell which one was pressed. Also, is that behavior across all forms and what happens when you have multiple controller listening to the same event? Could some one point me to a good tutorial or explanation, what I've read so far hasn't been very clear.

Thanks

form:

Ext.define('MyApp.view.MyForm', { extend: 'Ext.form.Panel',


height: 250,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'My Form',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'MyButton'
},
{
xtype: 'button',
text: 'MyButton',
x: 10,
y: 40
}
]
});


me.callParent(arguments);
}


});


Controller:


Ext.define('MyApp.controller.MyController', { extend: 'Ext.app.Controller',


onButtonClick: function(button, e, options) {
alert('you pressed a button');
},


init: function() {
this.control({
"button": {
click: this.onButtonClick
}
});


}


});

apsq
19 Apr 2012, 6:42 AM
Try giving the button different itemIds and using them in your query/selector (e.g. "#some-button-id" instead of "button" -- itemIds work in component queries as HTML ids work in CSS).

ItemIds are essential to distinguish otherwise identical components, so you'll use them a lot. In forms, you can often reference fields by their name as you would in CSS (i.e. '[name="some-name"]'), though.

Johnbran
19 Apr 2012, 7:24 AM
Hey,
Thanks for your response. I thought the whole point of the Controller was to reduce overhead and that giving components an id was discouraged in a MVC application.

From the docs: "In Ext JS 3, a very common approach to getting a reference to an existing component instance on the page was the Ext.getCmp (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp) method. While this method continues to work, itís not the recommended method in Ext JS 4. Using Ext.getCmp (http://docs.sencha.com/ext-js/4-0/#!/api/Ext-method-getCmp) requires you to give every component a unique ID in order to reference it in your application. In the new MVC package, we can put a reference to a view instance (component) inside of a controller by leveraging a new feature in Ext JS 4: ComponentQuery (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery)."

Thanks

apsq
19 Apr 2012, 7:34 AM
Yes and no. You shouldn't use Ids. ItemIds OTOH don't need to be unique (they should be unique within a certain context, however). Think of itemIds as a more concrete identifier than an x-type and a less concrete one than a unique ID.

For access to components within a controller you should use refs, which create getters so you don't have to use component queries every time you want to access a component. These do use component queries for their definitions, too, but you keep them outside your application logic and instead just deal with the automatically generated getters.

You need to reference your components somehow, unambiguously. For this, itemIds are usually a good idea. Using Ext.ComponentQuery.query inside your application logic OTOH is definitely wrong.

BostonMerlin
19 Apr 2012, 9:02 AM
To piggy back onto what apsq said..... it can be confusing as you name your component via:
- userClassName to give a fully qualified name to your class/component
- userAlias to shorthand the fully qualified class name (i.e. xtype)
- id to create a unique app wide name to your component
- itemId to create a unique name of a component within a component.

it'll take time to digest.. i'm just getting past the learning curve after working with ST1 for a while now and now ST2 changes things.. and the Designer takes some time to understand it's nuances as well.

keep asking questions, the forums are a great place to learn the in's and out's of the framework and toolset.

John

apsq
19 Apr 2012, 9:05 AM
Let's not forget that ExtDesigner/Architect will also use some other things as fallbacks to show a name. I think the name attribute and inputId are some of them.

BostonMerlin
19 Apr 2012, 9:08 AM
true that... example, a label's html will be the components name in the IDE until one of the above mentioned id's are used. Several more instances like that.