sencha > MVC

app.js

Ext.application({
    name: 'Sencha',

    controllers: ['Main'],
    views: ['Main'],
    stores: ['Presidents'],
    models: ['President'],

    launch: function() {
        Ext.Viewport.add({	//添加一个或多个组件到这个容器中
            xtype: 'mainpanel'	//调用在 views/Main 中声明好的叫mainpanel的组件
        });
    }
});

 

view/Main.js

Ext.define('Sencha.view.Main', {//给这个组件声明一个名称,
    extend: 'Ext.navigation.View',//继承Ext 的navigationView
    xtype: 'mainpanel',//给自己定义了一个名称mainpanel
    requires: [	//加载PresidentList  2个View;
        'Sencha.view.PresidentList'
    ],

    config: {
        items: [{
            xtype: 'presidentlist' //执行名为presidentlist 的组件,在view/PresidentList中
        }]
    }
});

 

view/PresidentList.js

Ext.define('Sencha.view.PresidentList', {
    extend: 'Ext.List',	//继承List Layout
    xtype: 'presidentlist',	//
    requires: ['Sencha.store.Presidents'],	//加载数据源 在 store/Presdents 中
    
    config: {
        title: 'American XX',	//名称这个List Layout 的属性
        grouped: true,	//
        itemTpl: '{pic} ___ {name}',	//数据格式 
        store: 'Presidents',	//数据源 从Store 中的 Presidents 中获取 
        onItemDisclosure: true	//显示右边的方向箭
    }
});

 

store/Presidents.js

Ext.define('Sencha.store.Presidents', {
    extend: 'Ext.data.Store', //继承
    
    config: {
        model: 'Sencha.model.President', //调用model/President model,
        sorters: 'pic',	//根据XX排序
        grouper : function(record) {	//record 通过model存储后的数据
            return record.get('name')[0];	//按xxx 进行分组
        },
        data: [
			{ pic: "a", name: "1" },
			{ pic: "b", name: "2" },
			{ pic: "c", name: "3" }
        ]
    }
});

 

model/President.js

Ext.define('Sencha.model.President', {
	//model 的意思是 储存某种类型的数据
    extend: 'Ext.data.Model',
    config: {
        fields: ['pic', 'name']//本model的数据类型通过this.data.xxx 调用
							   //格式的话要看谁调用这个model 要和源store的字段一致
    },
	getFullName: function() {
		return this.get('pic') + '***' + this.get('name');	//获取pic和name键值
	}

});

 

controller/Main.js

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

    config: {
        refs: {
            main: 'mainpanel' //找到主要控制对象所在的view
        },
        control: {
            'presidentlist': {//presidentlist 为view 中声明的组件名
				itemtap: 'showDetail'	//当list 中each Item 点击时触发showDetail 事件
            }
        }
    },

    showDetail: function(list, idx, el, record) {//必须按照list完整的参数格式否则会出错
        Ext.Msg.alert(record.getFullName());	//打印日志console.log
    }

});