Sencha Touch MVC 模式

最新推荐文章于 2015-02-27 14:17:25 发布

原创最新推荐文章于 2015-02-27 14:17:25 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext

Sencha Touch 专栏收录该内容

34 篇文章

订阅专栏

本文介绍如何利用Ext JS库构建一个具备复杂数据展示和交互功能的应用，包括定义模型、创建数据存储、控制层实现事件监听与响应，以及视图层的简单布局与数据展示。

model 层：


//定义实体类
Ext.define('HelloWorld.model.Station', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    proxy: {
        type: 'ajax',
        url: 'data/stations.json',
        reader: {
            type: 'json',
            root: 'results' 
        }
    }
});


Ext.define('HelloWorld.store.Stations', {  //定义store
    extend: 'Ext.data.Store',
    requires: 'HelloWorld.model.Station',
    model: 'HelloWorld.model.Station',
    autoLoad: true
});

控制层：


//控制层,
Ext.define('HelloWorld.controller.Home', {
    extend: 'Ext.app.Controller',	
    views: ['Home', 'SimpleList'],//声明该控制层要用到的view
	stores: ['Stations'], //声明该控制层要用到的store

	refs: [{   //映射,这样就可以在控制层方便的通过geter取得相应的对象了
		    selector: 'carousel > panel > #bottomInput',
		    ref: 'bottomField'
	        },
            {
            selector: 'carousel > list', 
            ref: 'stationList'
            }
    ],
    init: function() {
        console.log('Init home controller');
		// Start listening for events on views
		//这里的this相当于这个控制层
		this.control({
            // example of listening to *all* button taps
			'button': { 'tap': function () {
						console.log('Every button says Hello world');
					} 
				},
            // Example of listening by an explicit id
			'#firstButton': { 'tap': function () {
						console.log('Only the button with id=firstButton says Hello');
						alert(this.getBottomField().getValue());
					} 
				}			
		});
    },

	onLaunch: function() {
		console.log('onLaunch home controller');
        // The "getter" here was generated by specifying the 
        // stores array (above)
        var stationsStore = this.getStationsStore();  

        stationsStore.load({
            callback: this.onStationsLoad,
            scope: this
        });
    },

	onStationsLoad: function() {
        console.log('onStationsLoad home controller');
        // get a reference to the view component
        var stationsList = this.getStationList();
        // do something
    },

    onStationSelect: function(selModel, selection) {
        // Fire an application wide event
        this.application.fireEvent('stationstart', selection[0]);
    },

});


//view 层 不复杂
Ext.define('HelloWorld.view.SimpleList', {
	extend: 'Ext.Panel',	
	alias: 'widget.simplelist',
	layout: 'vbox',
	config : {
		items: [ 	
		{ xtype: 'list', 
            layout: 'fit', //fullscreen: true, 
            height: '200',
            store: 'Stations',
            itemTpl: '{id} :: {name}'
            }
		]		
	}, 
	initialize: function() {
	    console.log('initialize simplelist view');	    
		this.callParent();
    }
});

配置


Ext.Loader.setConfig({ enabled: true }); //开启动态加载

Ext.require([    
    'Ext.XTemplate',
    'Ext.Panel',
	'Ext.Button',
    'Ext.List'
]);

// Main application entry point
Ext.application({
	phoneStartupScreen: 'images/sencha_logo.png',
	name: 'HelloWorld',  //命名空间 
    // the controller will take care of creating the view        
	controllers: ['Home'],  //声明所用到的控制层
	// You could delete this, here only to illustrate
    // the sequence of events		
	initialize: function () {  //初始化
		console.log('app initialize');
		this.callParent();
	},	
	launch: function() {       //开始        
		console.log('app launch');
		var carousel = Ext.create('Ext.Carousel', {
		    fullscreen: true,
		    // clean instantiation using the widget.alias's defined
            // in each view
			items: [
                { xtype: 'home' },
				{ xtype: 'simplelist' }                
            ]
		});
    }
});

[b]看的老外的demo ！ [/b]