PDA

View Full Version : Unable to get UI events in a controller



landed
13 Mar 2012, 9:29 AM
I'm using an MVC model and want to get UI events and action them from the controller. I have managed to set listeners on items in my view but I cant send data (an x y coord) of a tap to the controller. Here is what I'm tryin gin the controller
Ext.define('LeBigApp.controller.Chart', { extend: 'Ext.app.Controller',


config: {

refs:{

chartTab:'#chartTab',
chartHolder:'#chartHolder',
chartCanvas:'#charto'
},

control: {


'#chartTab' :{ initialize: 'loadChart'},
'#ext-viewport':{orientationchange:'orinetationHandler'},
'#chartHolder':{tap:function(){alert('zzz')}}

}

},

mitchellsimoens
13 Mar 2012, 9:37 AM
I'm not a fan of using id or itemId but are the components resolvable?

landed
14 Mar 2012, 2:16 AM
well I just ran the following which worked ok
'#chartHolder' :{ initialize: function(){alert('ini ok')}}, so its the way im doing the tap wrong ?

mitchellsimoens
14 Mar 2012, 3:20 AM
Does the component have a tap event on the component or is it on the element?

landed
14 Mar 2012, 3:46 AM
In the view I also have
listeners: { swipe: {
fn: function(){//need to do this in controller - dispatch an event ?
//this.setWidth('2000px');
//this.setHeight('2000px');
this.fireEvent('zoom', this);

//console.log(this)
},
element: 'element'
},
tap:{

fn: function(e){
var x = e.pageX,y = e.pageY;
alert('tap from view'+x);
//console.log(this)
},
element: 'element'


} and here it is working but I need to do my stuff from the controller. I could send an application event but I woul dhave thought I can just get the tap cleaner from the controller. As I said in the controller the initialise works, it just doesnt work for the tap.
Thanks

mitchellsimoens
14 Mar 2012, 3:58 AM
In the controller, the control config cannot use event options like element.

landed
14 Mar 2012, 4:05 AM
No that was the view.
Im now trying this

CONTROLLER
refs:{
chartTab:'#chartTab',
chartHolder:'#chartHolder',
chartCanvas:'#charto'
},

control: {


'#chartTab' :{ initialize: 'loadChart'},
'#ext-viewport':{orientationchange:'orinetationHandler'},
'#chartHolder':{tap:'asd'},

chartHolder: {
tap: function(){alert('zzz')}
}

chartHolder is a ref and being used by control (as per your docs http://docs.sencha.com/touch/2-0/#!/api/Ext.app.Controller) but she aint workin !!! grrrrr

mitchellsimoens
14 Mar 2012, 4:11 AM
Yes but the control config in the controller can only listen to components. In your view you used the element event option to make that tap event be listened to on the element but in the controller you can't do that (yet).

landed
14 Mar 2012, 4:15 AM
I'm not trying to do that (use 'element') in the controller ? Where I have used element is in the view.

Can you please just let me know if I can check a tap on an element or compoennt in a controller class. The docs suggest it can be done.

I have a 'canvas' tag chart in a chartHolder which is a component. I'm considering that the chartHolder considers it is 0x0 width and height as it holds canvas ? Or is this what is breaking the controller. Initialise is working on this compoennt just cant get the tap to fire.

I have seen just now there is no tap on a component ! I thought it was inherited. So this is perhaps the issue im facing.

Ok if I can get the tap from the view I cant seem to dispatch a fire application event to be read in this controller

mitchellsimoens
14 Mar 2012, 4:21 AM
I know you are not trying to, you are trying to listen to the tap event on a component that doesn't have a tap event. You can either listen for it on the view and fire the tap event on the component so the controller can see it or add the tap event listener on the element in the controller manually.

landed
14 Mar 2012, 4:36 AM
ok (thanks) we are at least on the same page now

so from the view I cant pick this up
this.fireEvent('tappee', this);

How can I pick up the tap event in the controller - given that the components don't have tap events in my case.
Controller > Config > Control

'#chartHolder' :{ tappee: function(){alert('tappee ok')}},

mitchellsimoens
14 Mar 2012, 4:45 AM
That should work as long as "this" in the this.fireEvent is of the component not the element.

landed
14 Mar 2012, 4:56 AM
That was the clue I needed, this was a panel (observable) BUT it didn't work. Maybe it doesn't bubble by default.
The solution is using parent property.
this.parent.fireAction('tappee', this);
was the fix I needed. Thanks for the help as always Mitchell.