1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    78
    Vote Rating
    1
    Johnbran is on a distinguished road

      0  

    Default Controller logic

    Controller logic


    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:
    Code:
    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:

    Code:
    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
                }
            });
    
    
        }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Location
    Germany
    Posts
    50
    Vote Rating
    10
    apsq will become famous soon enough

      0  

    Default


    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.

  3. #3
    Sencha User
    Join Date
    Dec 2010
    Posts
    78
    Vote Rating
    1
    Johnbran is on a distinguished road

      0  

    Default


    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 method. While this method continues to work, it’s not the recommended method in Ext JS 4. Using Ext.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."

    Thanks

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Germany
    Posts
    50
    Vote Rating
    10
    apsq will become famous soon enough

      0  

    Default


    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.

  5. #5
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    Germany
    Posts
    50
    Vote Rating
    10
    apsq will become famous soon enough

      0  

    Default


    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.

  7. #7
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      0  

    Default


    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.

Thread Participants: 2