View Full Version : odd ref issue

17 Aug 2012, 6:33 PM
Bit stumped here -whats wrong with this ref:

refs: {
canvas: 'Ext.DomQuery.select("#myCanvas")'

Whenever I call this in my controller via, say, this.getCanvas(), it freezes my browsers (Safari and Chrome).

When using the query outside of a ref, it works just fine.


17 Aug 2012, 7:20 PM
I dont think you can query like that in a ref. Try something like

refs: {
canvas: '#myCanvas'
Check out the guide here (http://docs.sencha.com/touch/2-0/#!/guide/controllers).

17 Aug 2012, 11:42 PM
Thank you for your reply.

That's what I originally tried, but it wont work (returns undefined).

I think somehow my issue lies in that the element is not a Sencha component as such, but an html element defined within the html attribute of a tab component. So, in a tabs html config I have:

<canvas id="myCanvas" width="500" height="500"></canvas>

Is it even possible to get a 'ref' to an elemnt declared in this way? I expected so, but using the DomQuery as opposed to the ComponentQuery?

18 Aug 2012, 9:54 AM
You could try it without the #, or create the canvas with a class="myCanvas". I'm not too sure. You should be able to get the html element using the query.

20 Aug 2012, 5:53 AM
refs will not be able to resolve elements, it uses ComponentQuery to resolve the Component.

20 Aug 2012, 7:22 AM
I thought the point of ST was partly that you mess with components and the DOM (Element) updates are handled by the framework. However, I've seen syntax like this for selecting DOM (see loading indicator samples):


20 Aug 2012, 6:10 PM
It doesn't seem to work for 'regular' elements. As per what Mitchell says.

I ended up just bypassing ref and setting my own property in this case.

Thanks all.