折腾了几天的extjs动态加载controller因为要换风格得扔了,存在这里供大家伙参考吧。
app.js
var application; Ext.tip.QuickTipManager.init(); Ext.Loader.setConfig({ disableCaching:true, enabled: true }); application =new Ext.application({ requires: [ 'Ext.window.MessageBox', 'Ext.container.Viewport' ], name: 'app', appFolder:'js/xxx/app', autoCreateViewport:false, controllers: [ 'frameController' ], launch: function() { Ext.widget("main_viewport"); } }); function refresh4Session() { Ext.Ajax.request({url: GLOBAL_ROOT_PATH+'/blank.jsp'}); setTimeout(refresh4Session,5*60*1000);//五分钟 } refresh4Session();
Ext.define('app.controller.frameController',{ extend : 'Ext.app.Controller', alias : 'controller.frameController', views : ['Viewport'], refs:[ {ref:'tabpanel',selector:'main_viewport>tabpanel[id=tabpanel]'} ], init : function(application) { var me = this; window.application=me.getApplication(); me.control({ 'main_viewport>panel[region=west]':{ render:function(obj){ var treepanel=Ext.create('Ext.tree.Panel',{ title:'test', autoHeight:true, autoScroll: true, split: true, rootVisible:false, lines:true, store: Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: [ {text: '菜单名称', page: 'xxxxInfo_List', controller_full_class_name:'app.controller.xxxxInfo',leaf: true}, {text: '菜单名称', page: 'xxxxLevel_List',controller_full_class_name:'app.controller.xxxxLevel',leaf: true} ] } }), listeners: { 'itemclick': function(view, record){ if (!Ext.ClassManager.isCreated(record.raw.controller_full_class_name)) { me.getApplication().getController(record.raw.controller_full_class_name); } if(record.isLeaf()){ var id = 'tab-' + record.internalId; var center = me.getTabpanel();//view.up('viewport').down('tabpanel'); var tab = center.queryById(id); if(!tab){ tab = center.add(Ext.widget(record.raw.page, {itemId: id, title: record.get('text'),closable : true})); } center.setActiveTab(tab); } } } }); obj.items.add(treepanel); } } }); } });
上面的代码中,实现动态加载controller的最核心的其实就是
if (!Ext.ClassManager.isCreated(record.raw.controller_full_class_name)) { me.getApplication().getController(record.raw.controller_full_class_name); }
其他的就是mvc的正常的东西,比较简单了。
相关推荐
demo描述: 1. 页面主框架是左是一个tree,右边是一个tablepanel ...3. 点击左边的树的节点动态加载controller生成一个table 注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的
可以通过动态创建controller的方式,还能遵循mvc设计规范。这个例子完美破解,经过测试。 extjs4.0好像设计上是一个应用对应一个application,所以原先想通过动态加载多个application来实现上面的需求。但是那样会...
extJS4 MVC demo项目入门涉及的是前端开发领域的技术要点,主要介绍了extJS4框架中的MVC(Model-View-Controller)模式在实际开发项目中的应用方法,并着重讲述了如何实现前端资源的按需加载和动态加载。在了解这些...
ExtJS MVC示例是基于ExtJS 4.2.0框架的一个典型应用场景,它展示了如何在Web应用中利用MVC(Model-View-Controller)设计模式进行开发。MVC模式是一种软件设计模式,用于分离应用程序的数据、用户界面和逻辑控制,以...
在本工程中,我们将深入探讨ExtJS 4.0的MVC模式,以及如何通过controller、view、model和store来构建应用。 **1. MVC模式** MVC模式是一种软件设计模式,将应用程序分为三个主要组件:模型(Model)、视图(View)...
而MVC(Model-View-Controller)设计模式是ExtJS中组织代码和管理应用程序逻辑的重要方式。本文将深入探讨如何在ExtJS中使用MVC模式来构建一个简单的应用。 首先,让我们了解MVC模式的基本概念。MVC模式将应用程序...
MVC(Model-View-Controller)架构模式是ExtJS 4中一个核心的设计原则,它有助于实现应用的模块化和可维护性。这个“Extjs4 MVC小实例”很可能是为了展示如何在实际项目中有效地运用MVC模式。 **模型(Model)** 在...
在这个主题中,我们将深入探讨如何在ExtJS 4.0中结合MVC模式实现动态加载功能。 **MVC模式** MVC模式是一种软件设计模式,它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。在...
MVC(Model-View-Controller)模式是软件设计中的一个经典模式,它在ExtJS中被广泛应用,以实现应用程序的模块化和可维护性。这个"ExtJS MVC入门级开发案例"是一个理想的学习资源,适合初学者理解并掌握如何在ExtJS...
EXTJS MVC 完整 demo 是一个基于 EXTJS 框架实现的模型-视图-控制器(Model-View-Controller)架构的示例项目。EXTJS 是一款强大的前端开发框架,用于构建桌面级的富互联网应用程序(RIA)。它提供了一套完整的组件...
Store可以加载远程数据,也可以缓存本地数据,同时支持分页、排序和过滤。 在`ExtJS_MVC_Demo`这个压缩包中,可能包含了演示如何使用ExtJS 4.0.7实现MVC模式的各种示例代码。这些示例可能包括模型定义、视图组件的...
在 ExtJS 4.0 中,引入了 Model-View-Controller(MVC)架构模式,这是一种设计模式,用于组织和分离应用的业务逻辑、视图展示和用户交互。本文将深入探讨 ExtJS4.0 MVC 的核心概念、结构以及如何实现一个简单的 MVC...
EXTJS是一个功能强大的UI库,提供了大量的可重用组件,如表格、图表、菜单等,而MVC(Model-View-Controller)模式是一种设计模式,常用于分离应用程序的数据层、视图层和控制层,以实现更好的组织和可维护性。...
在ExtJS 4.2中实现左菜单的动态加载功能是一项常见的需求,特别是对于大型应用,它能够根据用户的需求按需加载菜单项,从而减少初次加载时的数据量和提升用户体验。 **MVC模式** 1. **Model**:模型层,负责处理...
这个"extjs4Mvc"事例提供了关于如何在ExtJS 4中有效地利用MVC(Model-View-Controller)设计模式的详细教程。MVC模式是软件工程中常用的设计模式,它有助于保持代码的组织性和可维护性。 在ExtJS 4中,MVC架构被...
ExtJS 4 MVC是一个强大的前端开发框架,它利用模型-视图-控制器(Model-View-Controller)架构模式,帮助开发者构建复杂、可维护的Web应用程序。MVC是一种设计模式,它将应用程序的不同部分分离出来,使代码更易于...
MVC(Model-View-Controller)模式是一种软件设计模式,广泛应用于EXTJS中,用于组织和分离应用的业务逻辑、视图展示和数据控制。在EXTJS的MVC实现中,每个部分都有明确的职责,有助于提高代码的可维护性和可扩展性...
MVC(Model-View-Controller)模式是软件工程中一种广泛使用的架构设计,它有助于将应用程序的业务逻辑、用户界面和数据管理分离开来,提高代码的可维护性和可扩展性。 在ExtJS4.2中,MVC的实现包括以下几个核心...