senchaa touch筆記（4）——MVC

1.Ext.Menu：用來設置sencha中的菜單的組件，可以被添加到屏幕的左右上下四個位置，如果再和touch事件結合的話應該可以實現滑動出現菜單的功能，雖然只是猜想，但這是後面一定要實現的效果。

var menu = Ext.create('Ext.Menu', {
     items: [
         {
             text: 'Settings',
             iconCls: 'settings'
         },
         {
             text: 'New Item',
             iconCls: 'compose'
         },
         {
             text: 'Star',
             iconCls: 'star'
         }
     ]
 });

 Ext.Viewport.setMenu(menu, { //調用menu組件需要setMenu函數去初始化菜單組件在屏幕中顯示的位置
     side: 'left',
     reveal: true
 });on

 Ext.Viewport.showMenu('left');

2.創建自定義組件。創建自定義的組件對原有的組件進行擴展，有時候可以重用這些代碼片段。例如一個自定義的組件：

Ext.define('MyApp.panels.bookPanel', {
    extends: 'Ext.Panel',
    config: {
        data: {
            image_url : '',
            id : 0
        }
    }
})

同時在自定義組件中也可以添加自己自定義的方法。

3.MVC模式：

默認命名規則：命名空間一般爲在app文件下的子文件夾的名字，比如model,view,controller等等這些。也就是說一個命名空間對應一個子文件夾。而當創建某個命名空間下的類的時候，應該創建對應的同名的js的文件，比如MyApp.view.Main類，它的路徑即\app\view\Main.js，然後view和controller最好事一一對應的，不對應的話貌似不可以的。

Ext.app.Controller：MVC中的控制器，負責對各種事件進行監聽以及響應。可以說控制層是連接表現層和數據層的紐帶。在controller中Refs和Control是用來獲取app中的組件並且添加監聽事件的。

Refs實現的是一個在組件中尋找的過程，並且如果找到會建立一個一一對應的鍵值對。例如下面，就將組件中具有比較多要求的xtype爲infoPanel找出來，當然它的ID是‘mainNav’，然後在接下來就可以用getNav( )的方式來引用這個組件：

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            nav: '#mainNav',

            infoPanel: {
                selector: 'tabpanel panel[name=fish] infopanel',
                xtype: 'infopanel',
                autoCreate: true
            }
        }
    }
});

control是用來添加監聽事件的。它面向的對象既可以是Refs也可以是生成Refs的CompentQuery selector，看個官方的例子就明白：

Ext.define('MyApp.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            loginButton: {
                tap: 'doLogin'
            },
            'button[action=logout]': {
                tap: 'doLogout'
            }
        },

        refs: {       //control可以接受refs或者是生成refs的東東
            loginButton: 'button[action=login]'
        }
    },

    doLogin: function() {
        //called whenever the Login button is tapped
    },

    doLogout: function() {
        //called whenever any Button with action=logout is tapped
    }
});