PDA

View Full Version : odd ref issue



andygrant
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.

Cheers,
Andy

jerome76
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).

andygrant
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?

jerome76
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.

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

Bunchofstring
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):

Ext.fly('#myCanvas');
http://docs.sencha.com/touch/2-0/#!/api/Ext-method-fly

andygrant
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.