`
sailei1
  • 浏览: 127060 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Sencha Touch MVC 模式

ext 
阅读更多
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' }                
            ]
		});
    }
});


看的老外的demo !                                


分享到:
评论

相关推荐

    sencha touch mvc Demo

    在Sencha Touch中,Model-View-Controller(MVC)模式是其核心架构,用于组织和管理应用程序的各个部分。本Demo将向我们展示如何利用Sencha Touch MVC实现一个功能完善的移动应用。 1. **Model**:在Sencha Touch中...

    Sencha Touch2 MVC Demo (含源码/数据库)

    在这个“Sencha Touch 2 MVC Demo”中,我们很可能会找到一个完整的示例项目,展示了如何在Sencha Touch 2中运用MVC模式来构建应用。源码的分析将有助于深入理解框架的工作原理和最佳实践。 **MVC模式详解** 1. **...

    sencha_touch_mvc

    最近在学习sencha touch;走了不少弯路。我从这个sencha touch mvc框架中获益匪浅;发出来跟大家共享。直接用chrome和safari打开index.html;ie和firefox不支持。希望对大家有用

    sencha touch camera MVC模式

    在“Sencha Touch Camera MVC模式”中,我们将探讨如何在Sencha Touch中集成相机功能,并使用MVC模式进行开发。 1. **MVC模式**: MVC模式是一种软件设计模式,用于分离应用程序的数据逻辑、用户界面和业务逻辑。...

    sencha touch项目源码

    Sencha Touch 是一款专为移动设备设计的前端框架,它提供了丰富的组件和API,用于构建交互式的、响应式的Web应用程序。...同时,这也是一个实践Sencha Touch MVC模式的好机会,有助于提升你在前端开发领域的专业技能。

    sencha-touch2 mvc demo

    本示例“sencha-touch2 mvc demo”是关于Sencha Touch 2 MVC架构的一个简单演示,它展示了如何在移动应用中有效地组织代码并利用MVC模式。MVC(Model-View-Controller)是一种流行的设计模式,用于分离应用程序的...

    Sencha Touch 2入门教程之MVC例子程序源代码

    在Sencha Touch 2中,MVC模式被用来组织和管理应用的逻辑,提高代码的可维护性和可扩展性。 1. **模型(Model)**:模型层负责存储和管理应用程序的数据。在Sencha Touch 2中,你可以定义一个模型类来描述数据对象...

    sencha touch中文翻译文档

    2. **架构与模型**:解释Sencha Touch的基本架构,如MVC模式,以及如何定义和使用数据模型(Model)来处理业务逻辑和数据存储。 3. **视图(Views)**:介绍各种UI组件,如按钮、列表、面板、表单等,以及如何...

    Sencha Touch 2 MVC Demo 本地Json访问数据

    总结来说,"Sencha Touch 2 MVC Demo 本地Json访问数据"这个示例旨在展示如何在Sencha Touch 2环境中,使用MVC模式和本地JSON数据构建移动应用。通过理解并实践这些知识点,开发者可以更好地理解和应用Sencha Touch ...

    senchaTouch和fusioncharts结合的实例

    Sencha Touch 和 FusionCharts 的结合使用,是一种在移动设备上创建交互式图表和图形的高效方式。Sencha Touch 是一个流行的JavaScript框架,专门用于构建触摸优化的移动Web应用程序,而FusionCharts则是一款强大的...

    sencha touch动态加载组件

    6. **MVC模式的应用**:Sencha Touch采用Model-View-Controller(MVC)架构,允许开发者将业务逻辑、视图和数据控制分离。在动态加载场景下,可以创建独立的MVC模块,根据需要动态引入。 在"DynamicMVC"这个文件夹...

    sencha touch sdk工具

    Sencha Touch SDK工具是开发移动应用的重要资源,尤其对于那些希望使用Sencha Touch框架构建触控友好、跨平台Web应用程序的开发者来说。Sencha Touch是一个强大的JavaScript库,它提供了丰富的UI组件和API,使得...

    《SenchaTouch权威指南》源代码-

    《SenchaTouch权威指南》同书源代码 本代码清单内包括本书全部资源文件与全部代码文件,其中内容如下所示: 1.第一章至第十四章下各子文件夹,以及第十五章的15-1、15-2、15-3子文件夹中均包含开发阶段使用的index-...

    webapp界面UI框架Sencha Touch 是WEB APP的界面UI组件库,明显比jquery Mobile快.zip

    同时,它采用 MVC(Model-View-Controller)架构模式,有助于保持代码组织有序,便于维护和扩展。此外,Sencha Touch还支持本地存储和离线应用,使Web应用能够在无网络连接的情况下依然可以运行一部分功能。 相比之...

    sencha touch2学习笔记(一)---环境搭建和开发工具配置

    关于源码,Sencha Touch 2基于MVC(Model-View-Controller)架构,它的源码组织清晰,方便理解和扩展。学习源码有助于深入理解其工作原理,从而更好地利用其特性。你可以在`app`目录下找到模型(model)、视图(view...

    Sencha Touch-2.4.2

    它的API设计遵循了MVC(模型-视图-控制器)模式,使得代码结构清晰,易于维护。 压缩包中的“touch-2.4.2”文件可能包含了以下内容: 1. 框架的核心库文件,如sencha-touch.js和sencha-touch.css,开发者可以直接在...

    sencha touch 2.0 公司车辆管理系统 移动开发

    1. MVC模式:在软件工程中,MVC模式是一种广泛使用的架构模式,用于分离应用程序的数据模型、用户界面和控制逻辑。在Sencha Touch 2.0中,模型(Model)负责存储和管理数据;视图(View)处理用户界面元素和显示数据...

Global site tag (gtag.js) - Google Analytics