{"id":560,"date":"2011-08-08T16:16:44","date_gmt":"2011-08-08T16:16:44","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=560"},"modified":"2011-08-08T16:16:44","modified_gmt":"2011-08-08T16:16:44","slug":"creating-a-sencha-touch-mvc-application-from-scratch-part-3","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-3\/","title":{"rendered":"Creating a Sencha Touch MVC application from scratch, part 3"},"content":{"rendered":"<p>In this article we will continue to build our <strong>Sencha Touch MVC app<\/strong> we\u2019ve started in <a title=\"Creating a Sencha Touch MVC application from scratch, part 1\" href=\"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-1\/\">part 1<\/a> and <a title=\"Creating a Sencha Touch MVC application from scratch, part 2\" href=\"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-2\/\">part 2<\/a>. This time we will explore different ways to call a controller action.<\/p>\n<p><strong>A controller action can be called in three ways:<\/strong><\/p>\n<ul>\n<li>Using the route as a value for the href attribute of an anchor tag: <strong>&lt;a href=&#8221;#route&#8221;&gt;Some Route&lt;\/a&gt;<\/strong><\/li>\n<li>Using the <strong>Ext.dispatch<\/strong> and <strong>Ext.redirect<\/strong> functions: <strong>Ext.redirect(&#8216;route&#8217;)<\/strong><\/li>\n<li>Calling the controller&#8217;s action directly: <strong>Ext.ControllerManager.get(&#8216;SomeController&#8217;).someAction()<\/strong> or <strong>this.someAction()<\/strong> from the same controller action.<\/li>\n<\/ul>\n<p>First, let&#8217;s add another action in our <strong>HomeController.js<\/strong> named <strong>about<\/strong>.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ about action\r\nabout: function()\r\n{\r\n\tif ( ! this.aboutView)\r\n\t{\r\n\t\tthis.aboutView = this.render({\r\n\t\t\txtype: 'HomeAbout',\r\n\t\t});\r\n\t}\r\n\r\n\tthis.application.viewport.setActiveItem(this.aboutView);\r\n},\r\n<\/pre>\n<p>Now let&#8217;s create the view for this action (<strong>app\/views\/home\/HomeAboutView.js<\/strong>):<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nApp.views.HomeAbout = Ext.extend(Ext.Panel, {\r\n    html: '&lt;h2&gt;About&lt;\/h2&gt; &lt;p&gt;MvcTouch is a Sencha Touch demo application.&lt;\/p&gt;',\r\n\tscroll: 'vertical',\r\n\tstyleHtmlContent: true,\r\n\tstyle: 'background: #d8efed',\r\n});\r\nExt.reg('HomeAbout', App.views.HomeAbout);\r\n<\/pre>\n<p>To make things look nicer let&#8217;s create a style sheet file (<strong>res\/css\/style.css<\/strong>) with the following content:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\na.menu-item {\r\n\tdisplay: block;\r\n\tpadding: 1em;\r\n\tfont-weight: bold;\r\n\ttext-decoration: none;\r\n\ttext-transform: uppercase;\r\n\tborder-radius: 10px;\r\n\tbox-shadow: 1px 1px 4px #768395;\r\n\tbackground: -webkit-linear-gradient(top, #fff, #ddd);\r\n}\r\n<\/pre>\n<p><em>Note: don&#8217;t forget to include the view and the style sheet in index.html<\/em>.<\/p>\n<h2>Calling a controller action using a HTML link<\/h2>\n<p>First, we&#8217;ll call a controller action by using a HTML link. For this, we will modify the html property of the <strong>HomeIndex<\/strong> view like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nhtml: '&lt;a href=&quot;#Home\/about&quot; class=&quot;menu-item&quot;&gt;About&lt;\/a&gt;',\r\n<\/pre>\n<p>In the href property of the anchor tag we add the route prefixed by a pound sign.<\/p>\n<p>Now open <strong>index.html<\/strong> in your WebKit based browser and you&#8217;ll see the about link. If you click on it you should be redirected to the about action.<\/p>\n<p><a href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-about-link.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-569\" title=\"MvcTouch part 3 about link\" src=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-about-link.jpg\" alt=\"\" width=\"628\" height=\"423\" srcset=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-about-link.jpg 628w, https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-about-link-300x202.jpg 300w\" sizes=\"(max-width: 628px) 100vw, 628px\" \/><\/a><\/p>\n<p>When you are on the about action you can click the browser&#8217;s back button to go back to the index action. While you are moving back and forth between this actions you should see something like this in the url: <strong>index.html#Home\/index<\/strong> and <strong>index.html#Home\/about<\/strong>.<\/p>\n<p><strong>Note:<\/strong> If you have <strong>index.html#Home\/about<\/strong> in the url and you click refresh in a desktop browser the application will start with the about action being called first, not index one. Remove the part after <em>index.html<\/em> to start in the default route.<\/p>\n<h2>Using the <strong>Ext.redirect<\/strong> function to call a controller action<\/h2>\n<p>While clicking the browser&#8217;s back button to go back to the index action may be ok in a desktop browser, on a mobile device that doesn&#8217;t have a back button, like the iPhone, there will be no way on getting back. Let&#8217;s fix this by adding a back button to the toolbar.<\/p>\n<p>To add a button to the toolbar we need to fill its<strong> items<\/strong> property, so open<strong> app\/views\/Viewport.js<\/strong> and make the docked toolbar to look like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nxtype: 'toolbar',\r\ntitle: 'MvcTouch',\r\nitems: [\r\n    {\r\n    \ttext: 'Back',\r\n    \titemId: 'backBtn',\r\n    \tui: 'back',\r\n    }\r\n],\r\n<\/pre>\n<p>Since we didn&#8217;t specified an xtype, the toolbar items will use the <strong>button<\/strong> xtype and will be instances of <a title=\"Sencha Touch Ext.Button\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Button\">Ext.Button<\/a> class.<\/p>\n<p>The <strong>text<\/strong> property of the button will be the button&#8217;s label.<\/p>\n<p>Using the <strong>itemId<\/strong> we can get the button&#8217;s object instance. We&#8217;ll use this to hide and show the button only when apropiate, but most importantly will be used to attach a method to be called when the button is tapped\/clicked.<\/p>\n<p>The <strong>ui<\/strong> property defines the style of the button. Setting it to back, the button will be arrowed-like.<\/p>\n<p>Here&#8217;s how the toolbar should look:<\/p>\n<p><a href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-back-button.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-574\" title=\"MvcTouch part 3 back button\" src=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-back-button.jpg\" alt=\"MvcTouch part 3 back button\" width=\"312\" height=\"159\" srcset=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-back-button.jpg 312w, https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-back-button-300x152.jpg 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><\/p>\n<p><strong>Let&#8217;s add a handler to out toolbar button<\/strong><\/p>\n<p>To add a handler function to our button we need first to get an instance of it and than calling the button&#8217;s method <strong>setHandler<\/strong>.<\/p>\n<p>So, open the Home controller (<strong>app\/controllers\/HomeController.js<\/strong>) and in the about action, above<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nthis.application.viewport.setActiveItem(this.aboutView);\r\n<\/pre>\n<p>add the following:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar backBtn = this.application.viewport.query('#backBtn')[0];\r\n\r\nbackBtn.setHandler(function(){\r\n\tExt.redirect('Home\/index');\r\n});\r\n<\/pre>\n<p>To get the instance for the back button we take the one for the viewport and call the <strong>query<\/strong> function on it. With this function we can search components with a similar syntax to a CSS selector, so <strong>#backBtn<\/strong> should look familiar to you if you know CSS.<\/p>\n<p>The query function executes an <strong>Ext.ComponentQuery.query<\/strong> and returns an array of components. Since there is only one component with itemId <em>backBtn<\/em>, the first item of the returning array is our toolbar button.<\/p>\n<p>To find more about component queries you can go <a title=\"Sencha Touch Ext.ComponentQuery\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.ComponentQuery\">here<\/a> to read what the Sencha Touch documentation has to say.<\/p>\n<p>Now that we have the button&#8217;s instance we can attach an handler to it to be triggered when it&#8217;s tapped\/clicked. We do this by passing a function to the <strong>setHandler<\/strong> button&#8217;s method. In this function we use <strong>Ext.redirect<\/strong> to go back to the index action by passing it&#8217;s route.<\/p>\n<p><strong>Ext.redirect <\/strong>is a shorthand for <strong><a title=\"Sencha Touch Ext.Dispatcher\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Dispatcher\">Ext.Dispatcher<\/a>.redirect<\/strong> \u00a0and, as the sencha documentation describes, <em>&#8220;dispatches a request to a controller action, adding to the History stack and updating the page url as necessary&#8221;<\/em>.<\/p>\n<p><strong>Now you can test the button.<\/strong> From <strong>index<\/strong> go to <strong>about<\/strong> and click the back button: you should be redirected back to index. Notice that the slide animation is from right to left and the natural transition would be the other way around. We&#8217;ll fix this in the next step.<\/p>\n<h2>Using the <strong>Ext.dispatch<\/strong> function to pass optional parameters when calling a controller action<\/h2>\n<p>As you&#8217;ve seen in the previous step, we need to fix the slide animation when going back to the index action.<\/p>\n<p>The index action displays it&#8217;s view like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nthis.application.viewport.setActiveItem(this.indexView);\r\n<\/pre>\n<p>The <strong>setActiveItem<\/strong> function accepts a second parameter: <em>&#8220;the cardSwitchAnimation used to switch between the cards. This can be an animation type string or an animation configuration object&#8221;<\/em> (quote from Sencha Touch documentation).<\/p>\n<p>So, we can define how the index view should animate when displayed using this second parameter, but we need to do this only when we are redirected to it from the about action. <strong>How we accomplish this?<\/strong> Well, by using the <strong>Ext.dispatch<\/strong> function.<\/p>\n<p><strong>Ext.dispatch<\/strong> is a shorthand for <strong><a title=\"Sencha Touch Ext.Dispatcher\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Dispatcher\">Ext.Dispatcher<\/a>.<\/strong><strong>dispatch<\/strong>, function that is used internally by Ext.Dispatcher.<strong>redirect<\/strong> (Ext.redirect). We&#8217;ll use this function because we can pass parameters to the action function we&#8217;re calling with it.<\/p>\n<p>Go to the about action and replace:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nbackBtn.setHandler(function(){\r\n\tExt.redirect('Home\/index');\r\n});\r\n<\/pre>\n<p>with:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nbackBtn.setHandler(function()\r\n{\r\n\tExt.dispatch({\r\n\t\tcontroller: 'Home',\r\n\t\taction: 'index',\r\n\t\thistoryUrl: 'Home\/index',\r\n\t});\r\n});\r\n<\/pre>\n<p>The dispatch function accepts as the only parameter an object with at least the controller and action to dispatch to as its properties.<\/p>\n<p>The <strong>historyUrl<\/strong> property is the route that will be added to the url (index.html#Home\/index).<\/p>\n<p>Using Ext.dispatch as we&#8217;ve done above we&#8217;ve accomplished the same thing as <strong>Ext.redirect(&#8216;Home\/index&#8217;)<\/strong>.<\/p>\n<p><strong><\/strong>If the <strong>historyUrl<\/strong> property it&#8217;s not added to dispatch function passed object here&#8217;s what will happen: <em>when you&#8217;ll be on the about action there will be <strong>index.html#Home\/about<\/strong> in url, after you click on the back button you&#8217;ll be redirected to index action, but the url will still have <strong>#Home\/about<\/strong> in it and if you try to click the about link from index view nothing will happen because the app will think that you are already on the about action because of the url<\/em>. You should comment the historyUrl property and test for yourself to understand better.<\/p>\n<p>Now let&#8217;s modify the object that we pass to the dispatch function like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nExt.dispatch({\r\n\tcontroller: 'Home',\r\n\taction: 'index',\r\n\thistoryUrl: 'Home\/index',\r\n\t\/\/\r\n\tanimation: {\r\n\t\ttype: 'slide',\r\n\t\treverse: true,\r\n\t},\r\n});\r\n<\/pre>\n<p>We&#8217;ve added the\u00a0<strong>animation<\/strong> custom property which is an object with specific animation properties. This object will be passed to the <em>setActiveItem<\/em> function from index action. We can add how many custom properties we want. We see next how we can access this custom properties we pass to the dispatch function.<\/p>\n<p>Modifiy the index action like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nindex: function(options)\r\n{\r\n    ...\r\n\r\n    this.application.viewport.setActiveItem(this.indexView, options.animation);\r\n},\r\n<\/pre>\n<p>Every action will have an <a title=\"Sencha Touch Ext.Interaction\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Interaction\">Ext.Interaction<\/a> object passed to it. In this object will find our custom properties we pass to the <em>Ext.dispatch<\/em> function. We&#8217;ve named this passed object <strong>options<\/strong>, as you can see on line 1 of the code above.<\/p>\n<p>The animation property we&#8217;ve set will be accessed like this: <strong>options.animation<\/strong>, as you can see on line 5 of the code above.<\/p>\n<p><strong>Now you can test!<\/strong> When you click the back button the index view should slide from left to right.<\/p>\n<p>For more info on animation properties you can check <a title=\"Sencha Touch Ext.anims\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.anims\">Ext.anims<\/a> and <a title=\"Sencha Touch Ext.Anim\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Anim\">Ext.Anim<\/a> in Sencha Touch documentation.<\/p>\n<h2>Hiding and showing a toolbar back button<\/h2>\n<p>The toolbar back button should be visible only when is needed, so on the index view it should be hidden.<\/p>\n<p>In the index action above:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nthis.application.viewport.setActiveItem(this.indexView, options.animation);\r\n<\/pre>\n<p>add:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar backBtn = this.application.viewport.query('#backBtn')[0];\r\nbackBtn.hide();\r\n<\/pre>\n<p>In the about action just under:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar backBtn = this.application.viewport.query('#backBtn')[0];\r\n<\/pre>\n<p>add<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nbackBtn.show();\r\n<\/pre>\n<p>If you test now, the back button should be visible only on the about view.<\/p>\n<h2>Calling a controller action directly<\/h2>\n<p>Let&#8217;s add a search feature to our app. For this we&#8217;ll create another controller.<\/p>\n<p>Create a file named <strong>SearchController.js<\/strong> in <em>controllers<\/em> folder, include it in the index file and add the following in it:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nExt.regController('Search', {\r\n\r\n\t\/\/ index action\r\n\tindex: function()\r\n\t{\r\n\t\talert('Search index working');\r\n\t},\r\n});\r\n<\/pre>\n<p>We&#8217;ll trigger our controller by clicking a button that will always be present on the toolbar, so let&#8217;s add that button to our viewport&#8217;s toolbar:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nitems: [\r\n    {\r\n    \ttext: 'Back',\r\n    \titemId: 'backBtn',\r\n    \tui: 'back',\r\n    },\r\n    {xtype: 'spacer'},\r\n    {\r\n    \titemId: 'searchBtn',\r\n    \ticonCls: 'search',\r\n    \ticonMask: true,\r\n    \tui: 'action',\r\n    },\r\n],\r\n<\/pre>\n<p>Between our toolbar buttons we&#8217;ve added an item with <strong>xtype spacer<\/strong> (<a title=\"Sencha Touch Ext.Spacer\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.Spacer\">Ext.Spacer<\/a>). The spacer will push the buttons to the sides.<\/p>\n<p>We&#8217;ve added two new properties to our search button: <strong>iconCls<\/strong> and <strong>iconMask<\/strong>. The <em>iconCls<\/em> is <em>&#8220;a css class which sets a background image to be used as the icon for this button&#8221;<\/em> (quote from Sencha Touch documentation). By setting its value to <strong>search<\/strong> the button will have a magnifying glass as its background image. To make this feature work, we also need to set the <em>iconMask <\/em>property to <em>true<\/em>.<\/p>\n<p>We&#8217;ve also set the <em>ui<\/em> property to <strong>action<\/strong> so that the search button will have a different style.<\/p>\n<p>Here&#8217;s how the button should look:<\/p>\n<p><a href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-button.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-582\" title=\"MvcTouch part 3 search button\" src=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-button.jpg\" alt=\"MvcTouch part 3 search button\" width=\"312\" height=\"123\" srcset=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-button.jpg 312w, https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-button-300x118.jpg 300w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><\/p>\n<p>Now we must set the handler function for the search button. Since this button will always do the same thing, we can set it&#8217;s handler in the app launch function like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nlaunch: function()\r\n{\r\n\tthis.viewport = new App.views.Viewport();\r\n\r\n\tthis.viewport.query('#searchBtn')[0].setHandler(function(){\r\n\t\tExt.ControllerManager.get('Search').index();\r\n\t});\r\n},\r\n<\/pre>\n<p>Using the <a title=\"Sencha Touch Ext.ControllerManager\" href=\"http:\/\/dev.sencha.com\/deploy\/touch\/docs\/?class=Ext.ControllerManager\">Ext.ControllerManager<\/a>&#8216;s get function we are able to retrieve a controller instance using the name we&#8217;ve used to register. After that we can simply call it&#8217;s actions like regular functions.<\/p>\n<p>If you test the search button now by clicking on it an alert should popup with the folowing text: <em>Search index working<\/em>. This is the alert we&#8217;ve added in the search controller index action.<\/p>\n<p><strong>Not it&#8217;s time to create and render the search view.<\/strong><\/p>\n<p>We want our search view to have a search field and a cancel button at the top, to slide from bottom to top and to have a semi-transparent background so that the view under it could be visible.<\/p>\n<p>First, create a file named <strong>SearchIndexView.js<\/strong> in <em>app\/views\/<strong>search<\/strong><\/em> (the search folder will need to be created), include it in the index file and add the following content in it:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nApp.views.SearchIndex = Ext.extend(Ext.Panel, {\r\n\tcls: 'search-panel',\r\n\tfullscreen: true,\r\n\tfloating: true,\r\n\tfloatingCls: '',\r\n\r\n\tdockedItems: [{\r\n\t\txtype: 'toolbar',\r\n\t\titems: [\r\n\t        {\r\n\t        \txtype: 'searchfield',\r\n\t\t        flex: 1,\r\n\t        },\r\n\t        {\r\n\t        \ttext: 'Cancel',\r\n\t        \titemId: 'cancelSearchBtn',\r\n\t        \tui: 'action',\r\n\t        }\r\n        ],\r\n\t}],\r\n});\r\nExt.reg('SearchIndex', App.views.SearchIndex);\r\n<\/pre>\n<p>We&#8217;ve set the <strong>cls<\/strong> property to <strong>search-panel<\/strong>: <em>&#8220;an optional extra CSS class that will be added to this component&#8217;s Element (defaults to &#8221;). This can be useful for adding customized styles to the component or any of its children using standard CSS rules.&#8221;<\/em> (quote from Sencha Touch docs). We&#8217;ll use this class to make the view&#8217;s background semi-transparent.<\/p>\n<p>The search view will be rendered on top of the other views and will not be displayed as a child of the viewport, so we need to set the <strong>fullscreen<\/strong> property to <em>true<\/em> to force the component to take up all the available space.<\/p>\n<p>Because we want our search view to have a slide animation, we need to set the <strong>floating<\/strong> property to <em>true,<\/em> otherwise the view will be displayed with no animation. Here&#8217;s what Sencha Touch documentation says about it: <em>&#8220;Create the Component as a floating and use absolute positioning. Defaults to false.&#8221;<\/em><\/p>\n<p>When the <em>floating<\/em> property is <em>true<\/em>, a class of <strong>x-floating<\/strong> will be added to the component. This class adds some CSS rules that we don&#8217;t want, like borders. To prevent this class by being added we set the <strong>floatingCls<\/strong> property to an empty string.<\/p>\n<p>We&#8217;ve added the search field and the cancel button in a docked toolbar. In this part of code the <strong>flex<\/strong> property (line 12 in the code above) will be set to <em>1<\/em> to make the search field have the max width it can (the cancel button will be pushed to the right).<\/p>\n<p>For more on the <em>flex<\/em> property and <em>layouts<\/em> you can watch the <a title=\"Intro to layouts, Sencha Touch screencast\" href=\"http:\/\/www.sencha.com\/learn\/intro-to-layouts\/\">Intro to layouts<\/a> Sencha Touch screencast.<\/p>\n<p>Now open <strong>res\/css\/style.css<\/strong> and add the following to it:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.search-panel {\r\n\tz-index: 10000;\r\n\tbackground: url(..\/images\/search-panel-bg.png) repeat;\r\n}\r\n<\/pre>\n<p>We have to set <em>z-index<\/em> to a big value to make sure that the search view will be on top of everything. We&#8217;ve also added a semi-transparent background image that can be downloaded from <a title=\"MvcTouch search panel background image\" href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/search-panel-bg.png\">here<\/a>. Download the image and add it to <strong>res\/images<\/strong> folder.<\/p>\n<p><strong>Now it&#8217;s time to render our view<\/strong><\/p>\n<p>Open the search controller (<em>SearchController.js<\/em>) and modify it&#8217;s index action like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nindex: function()\r\n{\r\n\tif ( ! this.searchView)\r\n\t{\r\n\t\tthis.searchView = this.render({\r\n\t\t\txtype: 'SearchIndex',\r\n\t\t});\r\n\r\n\t\tvar cancelSearchBtn = this.searchView.query('#cancelSearchBtn')[0];\r\n\t\t\/\/\r\n\t\tcancelSearchBtn.setHandler(function(){\r\n\t\t\tthis.searchView.hide();\r\n\t\t}, this);\r\n\t}\r\n\r\n\tthis.searchView.show({\r\n\t\ttype: 'slide',\r\n\t\tdirection: 'up',\r\n\t\tduration: 500,\r\n\t});\r\n},\r\n<\/pre>\n<p>First, let&#8217;s look at line 16 in the code above. Because we wanted the search view to show on top of the other views and not just be switched to it, we can&#8217;t make use of the <em>setActiveItem<\/em> function. So, we simply use the view&#8217;s show method. This function accepts an optional animation parameter than can be either a string containing an animation type, like slide, or it can be an object with animation properties, like the one we&#8217;ve passed to it.<\/p>\n<p>On line 11 we set the handler for the cancel button to a function that hides the search view. The <strong>hide<\/strong> function also accepts an animation parameter. Since we didn&#8217;t passed a parameter to this function, the view will be hided with the animation used in the show function, but in reverse.<\/p>\n<p><strong>Now you can test.<\/strong> The search view should look like this:<\/p>\n<p><a href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-view.jpg\"><img loading=\"lazy\" class=\"alignnone size-full wp-image-584\" title=\"MvcTouch part 3 search view\" src=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-view.jpg\" alt=\"MvcTouch part 3 search view\" width=\"312\" height=\"374\" srcset=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-view.jpg 312w, https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part-3-search-view-250x300.jpg 250w\" sizes=\"(max-width: 312px) 100vw, 312px\" \/><\/a><\/p>\n<p><strong>This is the end of part 3!<\/strong><\/p>\n<p>You can download the current phase of the project from <a title=\"MvcTouch part 3\" href=\"https:\/\/www.osd.net\/blog\/wp-content\/uploads\/2011\/08\/MvcTouch-part3.zip\">here<\/a>.<\/p>\n<p><strong><\/strong>If you have questions, suggestions or improvements don\u2019t hesitate to use the form below.<\/p>\n<div id=\"share-and-beer-container\">\t<div id=\"buy_me_a_beer_div\" class=\"single beer\">\n\t \t\n\t\t<div class=\"buy-beer\" onclick=\"document.getElementById('buy_me_a_beer_form').submit();\">\n\t\t\t<form action=\"https:\/\/www.paypal.com\/cgi-bin\/webscr\" id=\"buy_me_a_beer_form\" method=\"post\">\n\t\t\t\t<input type=\"hidden\" name=\"cmd\" value=\"_xclick\" \/>\n\t\t\t\t<input type=\"hidden\" name=\"business\" value=\"info@directaccess.ro\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"item_name\" value=\"A Beer For Creating a Sencha Touch MVC application from scratch, part 3\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"item_number\" value=\"1\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"return\" value=\"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-3\/\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"amount\" value=\"5\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"undefined_quantity\" value=\"1\" \/>  \n\t\t\t\t<input type=\"hidden\" name=\"currency_code\" value=\"USD\" \/>  \n\t\t\t<\/form>\n\t\t\t<p class=\"buy-beer-text\">If you liked this post <br \/> you can <strong>buy me a beer<\/strong><\/p>\n\t\t<\/div>\n\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this article we will continue to build our Sencha Touch MVC app we\u2019ve started in part 1 and part 2. This time we will explore different ways to call a controller action. A controller action can be called in three ways: Using the route as a value for the href attribute of an anchor &hellip;<\/p>\n<div class=\"cta1\"><a href=\"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-3\/\">Read more<\/a><\/div>\n<div class=\"like-excerpt\"><div\n        class=\"fb-like\"\n        data-href=\"https:\/\/www.osd.net\/blog\/mobile-development\/creating-a-sencha-touch-mvc-application-from-scratch-part-3\/\"\n        data-layout=\"button_count\"\n        data-action=\"like\"\n        data-show-faces=\"false\"\n        data-share=\"false\">\n        <\/div><\/div>","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[88],"tags":[92,82,93,90,89,95,94],"_links":{"self":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/560"}],"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=560"}],"version-history":[{"count":18,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"predecessor-version":[{"id":588,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/posts\/560\/revisions\/588"}],"wp:attachment":[{"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.osd.net\/blog\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}