`

用Ext4.0 MVC模式搭建一个应用程序框架

阅读更多
好不容易搞成功,之前因为少了这句this.callParent(arguments);折腾了好久,
文件路径



app.js文件代码
Ext.Loader.setConfig({enabled: true});	
Ext.application({
	name: 'OA',	
	
	appFolder: 'App',	
	
	
	
	controllers: [		
		'Frame'
	],
	
	launch: function(){		
		
		Ext.create('Ext.container.Viewport', {
			layout: 'fit',		
			hideBorders: false,
			items: [
				{   
					layout: 'border',	
					items: [
						{
							
							xtype: 'header',	
							region: 'north'	
						},
						{
							xtype: 'footer',
							region : 'south'
						},
						{
							xtype: 'main',
							region: 'center'
						},
						{
							xtype: 'nav',
							region : 'west'
						},
						{
							xtype: 'tip',
							region : 'east'
						}
					]
				}
			]
		});
		console.log('害虫捕捉中...............');
	}
	
	});


Frame.js代码
Ext.define('OA.controller.Frame',{
      extend : 'Ext.app.Controller',
      alias : ['widget.frame'],
      
      views : ['Header','Footer','Main','Nav','Tip'],
      
      refs : [
           {ref: 'main', selector: 'main'},
           {ref: 'header', selector: 'header'},
           {ref: 'footer', selector: 'footer'},
           {ref: 'nav', selector: 'nav'},
           {ref: 'tip', selector: 'tip'}
      ],
      
      init : function(){
      	    this.control({
      	    
      	    });
      	    console.log('组件'+this.$className+'初始化');
      }
});


Header.js代码
Ext.define('OA.view.Header',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.header'],
    
    title : '头部',
    height : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
        this.callParent(arguments);
    }
});



Footer.js代码
Ext.define('OA.view.Footer',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.footer'],
    
    title : '脚',
    height : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});


Main.js代码
Ext.define('OA.view.Main',{
      extend : 'Ext.panel.Panel',
      alias : 'widget.main',
      
      title : '首页',
      
      
      initComponent : function(){
      	console.log('组件'+this.$className+'初始化');
      	this.callParent(arguments);
      }
});


Nav.js代码
Ext.define('OA.view.Nav',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.nav'],
    
    title : '导航',
    width : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});


Tip.js代码
Ext.define('OA.view.Tip',{
    extend : 'Ext.panel.Panel',
    alias : ['widget.tip'],
    
    title : '待办事项',
    width : 150,
    
    initComponent : function(){
    	console.log('组件'+this.$className+'初始化');
    	this.callParent(arguments);
    }
});
  • 大小: 9.1 KB
  • App.rar (1.5 MB)
  • 下载次数: 1387
分享到:
评论
3 楼 xiexifeng113 2013-04-07  
出来了,就是慢了点
2 楼 xiexifeng113 2013-04-07  
点击index.html什么都没有啊?
1 楼 pymjer 2012-05-07  
包命名很规范

相关推荐

    Ext4.0MVC演示例子 Ext4.0MVC

    Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo

    Ext4.0的mvc的演示

    Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的演示Ext4.0的mvc的...

    Ext4.0以上的MVC简单示例

    Ext4.0是Sencha公司推出的JavaScript框架Ext JS的一个重要版本,主要专注于改善性能、增强可扩展性,并引入了新的特性。在这个“Ext4.0以上的MVC简单示例”中,我们将探讨如何利用MVC(Model-View-Controller)模式...

    Ext 4.0官方最新版下载

    Ext 4.0是Sencha公司开发的一个JavaScript框架的重要版本,专用于构建富客户端Web应用程序。这个框架基于组件模型,提供了丰富的用户界面组件和强大的数据管理能力,使得开发者能够创建功能强大、交互性强的Web应用...

    Extjs4.0 mvc模式开发

    ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它引入了Model-View-Controller(MVC)架构模式,帮助开发者更好地组织和管理代码,提高项目的可维护性和可扩展性。在本工程中,我们将深入...

    ext4.0 ext4.0

    【标题】"ext4.0 ext4.0" 指的是EXT文件系统的一个特定版本——EXT4.0,这是Linux操作系统中广泛使用的日志文件系统。EXT4,全称Fourth Extended File System,是EXT3的后继者,旨在提供更高的性能、更大的文件系统...

    Ext4.0教程

    1. **创建Hello World应用**:在WebRoot目录下建立一个名为`helloworld.js`的文件,输入Ext4.0的`application`配置代码,定义应用名称和启动函数,创建一个带有标题和内容的`Viewport`容器。 2. **HTML结构**:创建`...

    ext4.0动态加载示例

    通过分析和理解这些组件,开发者可以学习到如何使用Ext JS 4.0构建一个高效的动态加载SPA,掌握MVC模式的应用,以及JSON数据的处理方法。这对于想要深入学习Ext JS或者提高Web应用开发技能的人来说是非常有价值的...

    Ext4.0使用指南

    EXT4.0是Ext JS框架的一个重要版本,它提供了丰富的用户界面组件和强大的数据管理功能,广泛应用于Web应用程序的开发。这篇指南将着重于EXT4.0的基础知识,帮助初学者快速入门EXT JS的开发。 1. **EXTJS基础** - ...

    ExtJs4.0 mvc 模式

    ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它引入了Model-View-Controller(MVC)设计模式,帮助开发者更好地组织和管理代码,提高可维护性和可扩展性。在本实例中,我们将深入探讨ExtJS...

    Extjs4.0+MVC模式+存动态加载

    ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。它引入了全新的MVC(Model-View-Controller)设计模式,这使得应用的结构更加清晰,代码更易于管理和维护。在这个主题中,我们将深入探讨如何...

    ext4.0中文文档

    EXTJS文档则是关于EXT JavaScript库的相关资料,它是一个用于构建桌面级Web应用的富客户端框架,与EXT4文件系统本身并无直接关联,但可能在构建基于EXT4的管理界面时有所帮助。 总之,EXT4.0中文文档是理解、管理和...

    Ext4.0下载

    总的来说,Ext4.0是一个强大且功能丰富的JavaScript框架,为Web开发带来了高效和灵活的解决方案。通过下载其源码,开发者可以深入理解其工作原理,进一步定制和优化自己的应用。在实际项目中,结合详细的文档和丰富...

    Ext4.0中文api[帮助文档]

    Ext JS是一个用于构建富互联网应用程序(RIA)的前端框架,特别适合创建数据驱动的交互式用户界面。 在Ext4.0中,最重要的变化之一是对MVC(模型-视图-控制器)模式的强化,这有助于提高代码组织性和可维护性。模型...

    EXTJS4.0 MVC 架构 GRID 应用

    基于EXT4.0 MVC 模式开发GRID DEMO 包括:GRID 分页、分组、排序、编辑等等常用功能 访问路径:http://localhost/Ext4Mvc/gridManager/gm.html

    Ext4.0-API

    Ext4.0-API 是一个专为开发者设计的接口,它主要关注于Linux文件系统的扩展,特别是第四代Ext4文件系统。Ext4是Linux系统中广泛使用的日志式文件系统之一,以其高性能、高可靠性以及对大容量存储的支持而著称。在...

    Extjs 4.0 MVC分页实例

    ExtJS 4.0 是一个强大的JavaScript框架,用于构建富客户端Web应用程序。在这个MVC(Model-View-Controller)分页实例中,我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计...

    Ext 4.0 OA应用

    Ext 4.0是Sencha公司推出的一个JavaScript框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的组件库,包括表格、树形视图、图表、菜单等,使得开发者能够创建功能强大、用户界面友好的Web应用。在"Ext 4.0 ...

    ext4.0资源包

    Ext4 是 Ext3 的改进版,修改了 Ext3 中部分重要的数据结构,而不仅仅像 Ext3 对 Ext2 那样,只是增加了一个日志功能而已。Ext4 可以提供更佳的性能和可靠性,还有更为丰富的功能:

    Ext4.0中文版手册

    3. **延迟分配**:这是EXT4的一个关键特性,它推迟了数据块的实际分配,直到数据真正写入,这有助于优化磁盘空间的使用并提高性能。 4. **快速重命名**:EXT4改进了重命名操作,使其原子化,从而在多任务环境中避免...

Global site tag (gtag.js) - Google Analytics