PDA

View Full Version : [CLOSED] Controller not finding ID



keckeroo
1 Dec 2011, 11:20 AM
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 Dec 2011, 11:33 AM
Everything you do should be thought of reuse and using the id property goes against this.
Technically it should work as it should be looking for the itemId or id.

keckeroo
1 Dec 2011, 11:39 AM
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
1 Dec 2011, 3:59 PM
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
2 Dec 2011, 4:04 PM
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
3 Dec 2011, 3:10 PM
Okay, Thanks. I'll open a bug. Something weird going on here.

edspencer
24 Jan 2012, 2:49 PM
I can't reproduce this in PR4 - can you upgrade your app and try it out?

keckeroo
25 Jan 2012, 3:01 PM
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
26 Jan 2012, 5:30 PM
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.