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
    }
});