• Skills required:
    Basic awareness of MVC concepts
  • Time required:
    30 minutes

When using Sencha Architect, your code is split out in to the best-practice MVC style project structure, so you get your Models that define the data structure, Views that define the visual interface design and then the optional Controllers that bring that all together, and allow you to move your event logic outside of your Views.

In one of my previous videos, I showed how to make a simple Twitter Feed app. In this video, I’m going to show how you could make the same app but by making use of Controllers, instead of adding the event handler logic directly within the Views.

This would allow for better code re-use in the future, as well as ensuring code for specific modules is contained within an appropriately named Controller class.

In this example I’m using a JsonP Store. The JsonP Store is a Json Store with a JsonP proxy, and this is used when we want to request data from an external domain in Json format. If you want to know how exactly it works, along with a proper explanation, I’d recommend looking at the API documentation.

Here are the steps for re-creating this Sencha Architect project.

So I’ve gone ahead and created a new Sencha Touch project, and because I’m dealing with Twitter data again, I’ve already added my “Tweet” Model. This contains 5 fields I’m interested in: the text of the tweet, the created date, the user’s profile image URL, the user’s description and their display name. And note that the 3 user profile fields are nested lower down in the dataset, so I’ve also specified a “mapping” property for them.

  1. Add a new JsonP Store
  2. Change the userClassName of the Store to “Tweets”
  3. Configure the Store to use the Tweet model
  4. Configure the Store to autoLoad data
  5. Configure the Proxy to get it’s data from the following URL: https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=false&screen_name=sencha&count=20
  6. Add a new Panel component
  7. Change the userClassName to “Main”
  8. Set the id to “MainView”
  9. Change the layout of the Panel to card
  10. Add a new Toolbar to the Panel
  11. Change the Toolbar’s title to “Twitter Feed”
  12. Add a new List component
  13. Change the id of the new List to TweetList
  14. Configure the List to use the new Store
  15. Configure the List’s itemTpl to the following:
<div style="float:left; width: 60px;"> 
<img src="{profile_image_url}"> 
</div> 
<div style="margin-left: 62px;"> 
{text}<br>{created_at:date("d M Y")} 
</div>
  1. Right-click the Store and Load it’s data to show the data loaded in the List
  2. Add a new Panel to the container panel with an id of TweetPreview
  3. Set scrollable on the new Panel to true
  4. Set padding on the new Panel to 12px
  5. Set the tpl of the new Panel to the following:
<div style="float:left; width: 60px;">
<img src="{profile_image_url}">
</div>
<div style="position: relative; margin-left: 64px;">
{name}
<br>
<div style="color: gray; font-size: 80%;">{description}</div>

<div style="clear: both; margin-top: 6px; background-color: white; padding: 6px; border-radius: 10px;">
{text}
<br>
<div style="color: gray; font-size: 80%; padding-top: 6px;">Posted: {created_at:date("d M Y h:m")}</div>
</div>
  1. Add a new Button to the Toolbar, with the text Back
  2. Change the id of the Button to Back
  3. Change the ui of the Button to back
  4. Add a new custom property called “action”, with the value “back”
  5. Change the hidden property of the Button to true
  6. Add a new Controller to the project, with a userClassName of Main
  7. Add four new Controller References to the Main Controller:
  • mainView: #MainView
  • tweetList: #TweetList
  • backButton: #Back
  • tweetPreview: #TweetPreview
  1. Add a Controller Action, and specify the targetType as “Ext.Button”
  2. Set the event “name” to “tap”
  3. Specify the controlQuery to be [action=back]
  4. Rename the “fn” to “onBackButtonTap”
  5. Add the following code to the Controller Action:
button.hide();
this.getMainView().animateActiveItem(0, { type: "slide", direction: "right" });
this.getTweetList().deselectAll();

Where we’ve added Controller References, this automatically creates “get” methods, so for instance if the Controller Reference has a name of “tweetList”, it will automatically create a “getTweetList” method, capitalizing the first letter of the name.

  1. Add a Controller Action, and specify the targetType as “Ext.dataview.List”
  2. Set the event name to “itemtap”
  3. Specify the controlQuery to be #TweetList
  4. Add the following code to the Controller Action:
this.getMainView().animateActiveItem(1, { type: "slide", direction: "left" });
this.getBackButton().show();
this.getTweetPreview().setData(record.data);
  1. Save the project, and view on the iOS Simulator / in Google Chrome.

And that’s the project working, with all the event handlers defined within a Controller.