从零开始学习Sencha Touch MVC应用之七

来源：互联网发布：淘宝整点秒杀在哪里编辑：程序博客网时间：2024/05/21 09:08

在此我们将要继续构建我们的Sencha Touch MVC app应用工程，这次我们将探索控制器action的不同调用方式。
控制器action的调用方式将按下面三种方式：
l 利用路由作为href属性的定位标记的一个值的方式：<a href=”#route”>Some Route</a>
l 利用Ext.dispatch 和 Ext.redirect 功能: Ext.redirect(‘route’)
l 直接调用控制器的action：Ext.ControllerManager.get(‘SomeController’).someAction()或同一控制器的this.someAction()。
首先，我们在HomeController.js中添加另外的action，命名为about

// about action (){         if ( ! this.aboutView)         {                 this.aboutView = this.render({                          xtype: 'HomeAbout',                 });         }          this.application.viewport.setActiveItem(this.aboutView);},

现在我们来创建这个action的视图(app/views/home/HomeAboutView.js):

App.views.HomeAbout = Ext.extend(Ext.Panel, {    html: '<h2>About</h2> <p>MvcTouch is a Sencha Touch demo application.</p>',         scroll: 'vertical',         styleHtmlContent: true,         style: 'background: #d8efed',});

Ext.reg('HomeAbout', App.views.HomeAbout);
为了使界面效果更好，我们再建立一个样式表文件(res/css/style.css)，并且文件中要有以下内容：

a.menu-item {         display: block;         padding: 1em;         font-weight: bold;         text-decoration: none;         text-transform: uppercase;         border-radius: 10px;         box-shadow: 1px 1px 4px #768395;         background: -webkit-linear-gradient(top, #fff, #ddd);}

注：不要忘记把视图和样式表包含进index.html文件中。