Controller not finding ID

[keckeroo]

I have a controller which is looking for a component by ID. According to the docs I should
be able to create a control

this.control({
    '#mycontainer': {
          itemtap: function() { blah blah blah }
    }
});

however this only works when i put the 'viewport' word before the item id...

this.control({
   'viewport #mycontainer': {
       itemtap: function() { blah blah blah }
   }
});

Is this an omission in the docs for Ext.ComponentQuery or am I doing something
incorrectly ? (more than likely).

Thank you!

Kevin

[mitchellsimoens]

1. Everything you do should be thought of reuse and using the id property goes against this.
2. Technically it should work as it should be looking for the itemId or id.

[keckeroo]

I agree with the reuse philosophy. However this is a panel that will be created once and never destroyed. I figured I didn't need to define something for a single panel.

Having said that, it doesn't change the result i'm getting in the controller and the fact that it is not working as documented ;-)

PS - dataview docs do not have 'itemtap' as an event.

Thanks,

Kev

[rdougan]

itemtap documentation has been added for the next release.

Can you provide a simple testcase for this? I've not came across it before.

[keckeroo]

Thank you for taking a look at this. Please bear in mind that this is a VERY stripped down version of the barest of code to replicate the problem I am having (from a 600+ line app - phew). At the end you'll see the control references - one commented out, one not.

new Ext.application({
    name: 'MyApp',
    views: [ 'Main' ],
    controllers: [ 'Profiles' ],

    launch: function() {
        this.getMainView().create().setActiveItem(1);
    }
});

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

    config: {
        fullscreen: true,
        layout: 'card',  
        items: [{  
          itemId: 'profilegridview',
          xtype: 'dataview',
          store: 'Profiles',   
          itemTpl: '<div style="display: block; border: solid 1px #000000; width: 75px; height: 75px; float: left; margin: 2px; ">{ID}</div>'
        }]  
    }
});  
     
Ext.define("MyApp.model.Profile", {
    extend: 'Ext.data.Model',
    fields: [
       { name: 'ID' },
       { name: 'USERSIDFK' }
    ]
});  
     
Ext.define('MyApp.store.Profiles', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.Profile',
    data: [
        {"ID":"2206226","USERSIDFK":"2129649" },
        {"ID":"504242","USERSIDFK":"494131" },  
        {"ID":"226650","USERSIDFK":"224686" }   
    ]
});  
     
Ext.define('MyApp.controller.Profiles', {
    extend: 'Ext.app.Controller',

    stores: [ 'Profiles' ],

    init: function() {
        this.control({
            '#profilegridview' : { // DOESN'T WORK
//            'viewport #profilegridview' : { // WORKS
                itemtap: function() { alert('select'); }
            }
        });  
    }
});

Kevin

[rdougan]

Okay, Thanks. I'll open a bug. Something weird going on here.

[edspencer]

I can't reproduce this in PR4 - can you upgrade your app and try it out?

[keckeroo]

Hi Ed,

Nope - still have to use the 'viewport #id' to get it to work.

Kev

    config: { 
       refs: {
          'profileviews': '#profileviews',
          'profilelist': 'profilelist',  
          'gridview': '#profilegridview',
          'listview': '#profilelistview',
          'photoStrip': '#photoStrip',
          'profileDetailCard': '#profileDetail',
          'photoGallery': '#photoGallery', 
          'photoCarousel': 'photocarousel',
          'profileNavBar': '#profileNavBar'
       },
       control: {
           'profilelist button[action=switchView]': {
               tap: 'switchView'
           },
           'viewport #profilegridview' : {
               itemtap: 'loadProfile'
           },
           'profiledetail button[action=backToProfiles]': {
               tap: 'backToProfile'
           },
           'profiledetail button[action=backToProfileDetail]': {
               tap: 'showProfile'
           }, 
           'viewport #photoStrip' : { 
               itemtap: 'showCarousel'
           }
       }
    },

[edspencer]

Oh but hang on you're using itemId instead of id - that's not going to work. itemId is a locally-scoped identifier so it will work once you've got hold of a parent container (like Viewport). If you don't have a parent container in the selector it will never find the itemId because itemId is not guaranteed to be globally unique.

The upshot is - if you want to be able to address this view with a global id, use id instead of itemId.