View Full Version : Beyond the Getting Started Guide

27 Sep 2010, 12:40 PM

Like many others on this forum, the coding style and object hierarchies found in Sencha Touch are large in scope and present a different (OO) world of building an app. In making this transition, and having read the low-level API docs, and looked deep into the examples, I feel these are the most obvious questions that logically follow the getting started guide for me.

I'm not necessarily looking for answers here (well maybe pointers), just noting that these are my next steps, and I haven't found a good high-level explanation of these things specifically for Sencha Touch yet which makes the learning curve seem high. I see some great apps coming out though so am certain that this will click into place after a while which is good. I guess it's like when the original extjs stuff came out a few years back- the API docs were detailed, but too low-level to learn from. What was really helpful was all the blog posts around them about how to actually use the stuff with high-level examples that ended up being the main learning platform. Hopefully this sort of stuff will start appearing down the line.

So here's my next logical questions after the GS guide:

1. What are the main container layouts most useful for a mobile app? I see Panel and TabPanel used a lot - are there any more I should be looking at?

2. Probably the biggest confusion as a noob is understanding layouts. I'm used to using CSS for all my positioning, but for Sencha, I can't find a good overview of all the layouts available and examples in terms of common mobile design patterns. I get that card layout shows multiple pages, but only one at a time. How do I position elements inside a card though? HBox and VBox sound good starting points as sub layouts, but how do I control the positioning inside each VBox for example?

3. Should I fall back to using the API or CSS for positioning?

4. How do I manage animation - it's not obvious from the docs how to do this - say I have two views - a home view and a form view - can I slide between them on a button push? I guess the answer to this is making a card layout and slide between them. What about other transitions - what if I wanted to flip between two completely different views that aren't part of a card layout?

5. Does the phone hardware show it's own virtual keyboard whenever there is text entry or do I need to do something specific to show it?

6. I know this may sound stupid, but how do I address components to access their APIs? Say I want to programmatically change the titlebar in a docked toolbar. Do I just setup a JS reference to it and then access API directly in button handlers?

7. Can any container have items? I'm guessing this is the main way of building your interface - create a container, then add elements as items of this container. Again, I then come back to layouts - if we've got card layout, how do we then go a step further and position our elements on the card - I'm guessing flex has something to do with it as this seems to be a space filler - but what if I want to be more precise - height parameter on an element? Can I use percentages to avoid having to code different versions for different resolutions?

8. Can any container have a toolbar? Any number of toolbars?

9. How would I reproduce some jquery like effects? Say for example I wanted the toolbar to slide offscreen and slide back on. Or a panel of buttons to slide on and off the screen? Is this sort of stuff built in or do I have to build it? How would I start? Can I do something like on load, give a panel a class that has a CSS3 transform for example that brings up it's opacity. I guess I have to write the cycle code to change the opacity over time. Are there any APIs built in for doing this type of animation already like jquery.animate()?

10. What's the basic concept of storing data locally in the session and in persistent storage and how do we read/write. I'm guessing something to do with Ext.Data.store? How do we manage this for example with phone deactivate and activate states as you press the home button on your phone for example (I appreciate this is a mobile web toolkit, but many of us will want to cross-compile to native through phonegap or similar). Some good examples of saving application state on activate/deactivate would be real helpful.

11. Is there a component to manage/render an image or do we do this in HTML?

12. Many of the apps I have in mind would like to auth with social networking and make a transactional post. For example, Oauth with twitter or facebook, then make a post. Some examples of this would be real helpful or at least some pointers. Can this all be managed in the frontend with JS or if not and there's some redirection involved, how would you build a skeleton app to do a redirect, then come back. Maybe the twitter/FB APIs manage all of this through AJAX without needing to leave the page - would make sense. Anyone got some pointers for skeleton apps as demo?

13. What are the main different phone interface events and how do I handle them? Do all ext elements support them? How do I get notification of pinch/zoom, tap, and double tap? I see some components that monitor orientation. Do i have to do anything specific in my app to support the orientation changing? I.e. do I have to relayout all my components? What if I want to use a slightly different layout for my components when orientation changes - how do I go about this? Say i've got HTML top half and three buttons lower half, but when the phone is rotated, I want the HTML to be on left, and buttons now on right? If someone does a pinch/zoom on my HTML content, does the API/hardware do the zooming or do I have to do something like change the font-size on the fly?

14. Given that the licensing appears to be open source(ish) I don't see any people's source code to help learn from. There's a few examples in the forum, but would be a great help for lots more to be listed, and posted with their source code (not obfuscated/packed) as I guess this is the agreement to use the code (or am I wrong?) Or is it that everyone has been buying up commercial licenses?

There's some starting questions that I may have half answered myself, but I still wouldn't know how to put this all together or where to start without diving down into a deep low-level.

Thanks in advance.

27 Sep 2010, 3:49 PM
1) Don't confuse layouts/components. A layout is used on a container to position child components. The 2 main ones you'll be using are the card layout and the box layouts (vbox, hbox). So components implicitly define layouts, tab panel and carousel use a card layout, toolbar uses an hbox layout.

2) It depends what you want to use it for, there's no "right" answer here.

3) Generally, no, use the layouts.

4) There's examples of animating between cards in the kitchen sink demo.

5) Automatically shown

6) There's several ways to grab access to a component, but yes, one way is to say var foo = new Bar(); and then just call a method.

7) Yes, that's the whole point of a container. The box layouts use flex as a ratio, so it's essentially a %age.

8) A panel can and yes it can have as many as you want (docked items).

9) You would create a new animation then specify whatever options you want.

var anim = new Ext.Anim({
before: function(){
this.from = {
// options
this.to = {
// options

If you look at the FX code you'll see that it's already pre-defined some.

10) You'd use a store with a LocalStorageProxy.

11) Specify the html option of the component to display the image. Alternatively you could write your own component subclass that modifies the renderTpl to create an image directly.

12) None of that is really Touch specific, but if you need to do cross domain requests you'd need to use Ext.util.JSONP.

13) All events offered by the browser are supported. The stuff in Ext.Element just wraps around the native browser events.

14) That's up to the individual authors, you'd need to clarify it with them.