sencha > MVC

Ext.application({
    name: 'Sencha',

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

    launch: function() {
        Ext.Viewport.add({	// 
            xtype: 'mainpanel'	//  views/Main  mainpanel 
        });
    }
});

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

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

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

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 
	}

});

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
    }

});