{"id":796,"date":"2012-11-13T12:27:17","date_gmt":"2012-11-13T12:27:17","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=796"},"modified":"2012-11-13T12:27:17","modified_gmt":"2012-11-13T12:27:17","slug":"tab-bar-in-a-sencha-touch-2-mvc-application","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/javascript\/tab-bar-in-a-sencha-touch-2-mvc-application\/","title":{"rendered":"Tab Bar in a Sencha Touch 2 MVC application"},"content":{"rendered":"

In a previous article I’ve extended the Sencha Touch 1 tab bar<\/a> component to be used in a MVC structured application<\/strong>. After Sencha Touch 2 was launched some of the readers that liked that solution asked if it could be adapted for the new version. Now that I got the time to focus on this too, I will show you how I used the Tab Bar component in projects developed using Sencha Touch 2<\/strong>.<\/p>\n

To use TabBarMvc<\/strong> in version two of Sencha Touch you must follow the next steps:<\/p>\n

1. Download\u00a0TabBarMvc.js<\/a> and add it to your project<\/strong> in app\/view\/<\/strong> folder.<\/p>\n

2. Add the component as an item to the viewport view<\/strong> like this:<\/p>\n

\r\nitems: [\r\n    {\r\n        xtype: 'TabBarMvc',\r\n        items: [\r\n            {\r\n                text: 'Home',\r\n                iconCls: 'home',\r\n                route: '', \/\/ custom property of the TabBarMvc component\r\n            },\r\n            {\r\n                text: 'About',\r\n                iconCls: 'info',\r\n                route: 'about', \/\/ custom property of the TabBarMvc component\r\n            }\r\n        ]\r\n    }\r\n]\r\n<\/pre>\n
You also must add the following line at the top of the viewport file:<\/p>\n
\r\nExt.require('App.view.TabBarMvc');\r\n<\/pre>\n
3. Make TabBarMvc aware of the application instance<\/strong> by adding the following line in the app launch<\/em> method:<\/p>\n
\r\n\r\nExt.ComponentQuery.query('TabBarMvc')[0].setApp(this);\r\n\r\n<\/pre>\n
4. To use the animation parameters<\/strong> sent by the tab bar in your controller actions you can do something like this:<\/p>\n
\r\n\/**\r\n * home action\r\n *\/\r\nhome: function (animation) {\r\n    var view = this.getHomeView();\r\n\r\n    var anim = Ext.merge({}, this.animation, animation);\r\n\r\n    this.getViewport().animateActiveItem(view, anim);\r\n}\r\n<\/pre>\n
If you have defined a route like about\/:something<\/strong>, the controller action will look like this:<\/p>\n
\r\n\r\nhome: function (something, animation) { ...\r\n\r\n<\/pre>\n
The default animation is a slide. To change this, you can set the switchAnimation<\/em> property of TabBarMvc to a different effect like this:<\/p>\n
\r\n{\r\n    xtype: 'TabBarMvc',\r\n    switchAnimation: 'pop',\r\n    ...\r\n}\r\n<\/pre>\n
or like this:<\/p>\n
\r\n{\r\n    xtype: 'TabBarMvc',\r\n    switchAnimation: {\r\n        type: 'slide',\r\n        duration: 400\r\n    },\r\n    ...\r\n}\r\n<\/pre>\n
Note:<\/strong> If your application doesn’t have the name App<\/em> you’ll have to edit the following line in TabBarMvc.js<\/em> file to your needs:<\/p>\n
\r\nExt.define("App.view.TabBarMvc", {\r\n<\/pre>\n
You can download an example project from here<\/a>.<\/p>\n
If you have questions, suggestions or improvements don\u2019t hesitate to add a comment and let me know about them.<\/p>\n
\t
\n\t \t\n\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t\t  \n\t\t\t<\/form>\n\t\t\t
If you liked this post 
 you can buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"
In a previous article I’ve extended the Sencha Touch 1 tab bar component to be used in a MVC structured application. After Sencha Touch 2 was launched some of the readers that liked that solution asked if it could be adapted for the new version. Now that I got the time to focus on this …<\/p>\n
Read more<\/a><\/div>\n
\n        <\/div><\/div>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18,88],"tags":[90,89,108,109],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/796"}],"collection":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/comments?post=796"}],"version-history":[{"count":31,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions"}],"predecessor-version":[{"id":829,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions\/829"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}