1. #1
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    789
    Vote Rating
    24
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default Confused on ItemId versus Id when used with controller / componentquery

    Confused on ItemId versus Id when used with controller / componentquery


    I had thought that a controls id always would work and that only itemId works when the control is either a sibling or child. I've got the code below for a controller that listens for a button click (among other things). It does not respond when the button (continueButtonId) is set as the id property of the button, but the controller does respond when continueButtonId is the itemId of the button.

    What am I understanding incorrectly?

    Code:
    Ext.define('RegistrationApp.controller.RegisterSpeakerAttendeeSponsorController', {
        extend: 'Ext.app.Controller',
    
    
        onRbAttendeeChange: function(field, newValue, oldValue, options) {
            //console.log('onRbAttendeeChange');
    
    
            if (newValue == true) {
                this.rbChoice = 'attendee';
            }
    
    
            this.enableContinueButtonIfDisabled();
        },
    
    
        onRbSpeakerChange: function(field, newValue, oldValue, options) {
    
    
            //console.log('onRbSpeakerChange');
    
    
            if (newValue == true) {
                this.rbChoice = 'speaker';
            }
    
    
            this.enableContinueButtonIfDisabled();
        },
    
    
        onRbSponsorChange: function(field, newValue, oldValue, options) {
            //console.log('onRbSponsorChange');
    
    
            if (newValue == true) {
                this.rbChoice = 'sponsor';
            }
    
    
            this.enableContinueButtonIfDisabled();
        },
    
    
        onContinueButtonIdClick: function(button, e, options) {
            //console.log('continue: ' + this.rbChoice);
    
    
            var tabWizardPanel = Ext.ComponentQuery.query('#TabWizardId')[0];
    
    
            if (this.rbChoice === 'speaker' || this.rbChoice == 'attendee') {
                //console.log('speaker or attendee');
                tabWizardPanel.setActiveTab(1);
            } else if (this.rbChoice == 'sponsor') {
                //console.log('sponsor');
                tabWizardPanel.setActiveTab(2);
            }
    
    
    
    
        },
    
    
        enableContinueButtonIfDisabled: function() {
            var continueButton = Ext.ComponentQuery.query('#continueButtonId')[0];
    
    
            if (continueButton.isDisabled()) {
                continueButton.enable();
            }   
    
    
        },
    
    
        init: function(application) {
            this.control({
                "#rbAttendee": {
                    change: this.onRbAttendeeChange
                },
                "#rbSpeaker": {
                    change: this.onRbSpeakerChange
                },
                "#rbSponsor": {
                    change: this.onRbSponsorChange
                },
                "#continueButtonId": {
                    click: this.onContinueButtonIdClick
                }
            });
        }
    
    
    });

  2. #2
    Sencha User
    Join Date
    Jan 2013
    Location
    Germany, Freiburg i. Br.
    Posts
    31
    Vote Rating
    8
    StudentDaniel will become famous soon enough

      0  

    Default


    Hi :-)

    yesterday I read this:

    http://docs.sencha.com/architect/2/#!/guide/controllers

    and I think, you should do this maybe a second time.

    Maybe you have a scope problem. The reference will auto-add you a getter like getReference-Name and the id will be fetched automaticaly. So you have to set the id and not the itemId !

    This is different by using an event-handler ! Controller-Actions will use referenced by id.

    I hope this is exact - if not - sorry :-)

    But I think you are confused and the linked Doc will bring you back to the red line :-)

  3. #3
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    When it's about writing selectors for ComponentQuery, itemId and id are the same, when it's about getting direct items of a container then of course you use itemId.

    If an event is not fired then very probably that you have a wrong selector, so you can directly in console to test if you selector is ok and returns some results by using Ext.Component.query(selector).

    In your case should work both. Usually when there are more views per controller I write selectors for buttons this way:
    Code:
     'views_xtype #btns_itemId' : {}
    it adds some readability to code.

  4. #4
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    789
    Vote Rating
    24
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default


    vadimn,
    is 'views_xtype' the name of your controller?
    Also, I'm wondering if what I found is a bug. I would have though both would work (itemid and id) in ComponentQuery but the most definitely do not. In my example it is easy to set itemId to blank and Id to the same value and the controller never sees the event.

  5. #5
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    no, that's the xtype of the view which has the button. I'm sure that is not a bug. Post the code of the view with the button. Also better to use itemIds then id's.



  6. #6
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    789
    Vote Rating
    24
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default


    Here is where the button is. if I change itemId: rbSponsor to id: rbSponsor it does not fire. Does that make sense? please explain further. I really want to understand this (and thanks for your help)

    Code:
    Ext.define('RegistrationApp.view.AttendeeSpeakerOrSponsor', {
        extend: 'Ext.panel.Panel',
        alias: 'widget.AttendeeSpeakerOrSponsorAlias',
    
    
        id: 'attendeespeakerorsponsorid',
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
        bodyPadding: 20,
        title: 'Silicon Valley Code Camp Registration',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'radiogroup',
                        itemId: 'RadiobuttonGrp',
                        width: 400,
                        defaultType: 'radio',
                        layout: {
                            align: 'stretch',
                            type: 'vbox'
                        },
                        fieldLabel: '',
                        vertical: false,
                        items: [
                            {
                                xtype: 'radiofield',
                                itemId: 'rbAttendee',
                                name: 'attendeeType',
                                boxLabel: 'Attendee'
                            },
                            {
                                xtype: 'radiofield',
                                itemId: 'rbSpeaker',
                                name: 'attendeeType',
                                boxLabel: 'Speaker'
                            },
                            {
                                xtype: 'radiofield',
                                itemId: 'rbSponsor',
                                name: 'attendeeType',
                                boxLabel: 'Interested In Sponsoring'
                            }
                        ]
                    }
                ],
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        flex: 1,
                        dock: 'bottom',
                        height: 50,
                        itemId: 'ToolBarAttendeeSpeakerSponsor',
                        layout: {
                            pack: 'end',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'tbseparator'
                            },
                            {
                                xtype: 'button',
                                disabled: true,
                                itemId: 'continueButtonId',
                                iconAlign: 'right',
                                text: 'Continue'
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });

  7. #7
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Does the
    Code:
    Ext.ComponentQuery.query('#
    continueButtonId')

    return anything ?

  8. #8
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    789
    Vote Rating
    24
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default Even More to be confused about now

    Even More to be confused about now


    So, sticking to the original topic, the code below does show that doing a componentquery for itemId returns the component, id does not.

    Rubbing salt into this wound, it turns out that the component query fails (in some cases) in the compiled version of this same code. I have not yet set up m very simple repro, but I'm thinking this is just buggy code (on sencha's side) but I'd love to be shown wrong (or at least explained to)

    Code:
    Ext.define('MyApp.view.MyViewport', {
        extend: 'Ext.container.Viewport',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'panel',
                        title: 'My Panel',
                        items: [
                            {
                                xtype: 'button',
                                id: 'buttonId',
                                itemId: 'buttonItemId',
                                text: 'hits controller'
                            },
                            {
                                xtype: 'button',
                                text: 'Does Compent Query of buttonId',
                                listeners: {
                                    click: {
                                        fn: me.onButtonClick,
                                        scope: me
                                    }
                                }
                            }
                        ]
                    }
                ]
            });
    
    
            me.callParent(arguments);
        },
    
    
        onButtonClick: function(button, e, options) {
    
    
            var componentQueryButtonIdLen = Ext.ComponentQuery.query('#buttonId').length; 
            // returns 0
    
    
            var componentQueryButtonItemIdLen = Ext.ComponentQuery.query('#buttonItemId').length;
            // returns 1
    
    
            alert(componentQueryButtonIdLen + ',' + componentQueryButtonItemIdLen);
    
    
    
    
        }
    
    
    });
    Code:
    Ext.Loader.setConfig({
        enabled: true
    });
    
    
    Ext.application({
        views: [
            'MyViewport'
        ],
        autoCreateViewport: true,
        name: 'MyApp',
        controllers: [
            'MyController'
        ]
    });
    Code:
    Ext.define('MyApp.controller.MyController', {
        extend: 'Ext.app.Controller',
    
    
        onButtonIdClick: function(button, e, options) {
            console.log('button click inside controller');
        },
    
    
        init: function(application) {
            this.control({
                "#buttonItemId": {
                    click: this.onButtonIdClick
                }
            });
        }
    
    
    });

  9. #9
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Chisinau, Moldova
    Posts
    642
    Vote Rating
    25
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    You are testing when you have both itemId and id configured ? I see that yes, that may be a reason of the problem, because the selector parser uses filterById method, and within it is used component.getItemId
    Code:
     filterById = function(items, id) {   // USED IN QUERY PARSER        
     var result = [],               
     i = 0,               
     length = items.length,              
      candidate;          
      for (; i < length; i++) {               
           candidate = items[i];               
           if (candidate.getItemId() === id) {                
                result.push(candidate);              
            }         
      }  
     return result;        },
    
        getItemId : function() {    // ABSTRACT COMPONENT
          return this.itemId || this.id;   
     }
    So if itemId is configured then will be used always no matter if the component has id or not, which explains your results in '
    onButtonClick
    '

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi