说实话Ext这个东西还是比较不爽,那个官方的api也太简单了,很多地方都寥寥几句话,搞的像我这样的初学者很泄气,不过做事最好还是有始有终,有点心得,记录一下。
所谓的常见的应用界面就是登录完毕之后,左边一个菜单面板,中间一个TabPanel来放具体功能
后台传回数据后,点左边菜单应该可以动态加载功能
1.登录完毕后,加载左菜单,这个没啥好说的,数据:
{
"success": true,
"children": [
{ "functionId": 1, "functionMappingName": "userinfopanel","functionDes":"用户管理","iconCls" :"feed-icon","leaf": true },
{ "functionId": 2, "functionMappingName": "roleinfopanel","functionDes":"角色管理","iconCls" :"feed-icon","leaf": true }
]
}
functionId : 功能id
functionDes : 功能描述
functionMappingName : 其实就是定义在view中的 xtype,方便加载
2.按部就班定义model和store
model:
Ext.define('PJ.model.FunctionModel',{
extend : 'Ext.data.Model',
fields : ['functionId','functionMappingName','functionDes']
});
store:
Ext.define('PJ.store.FunctionStore',{
extend : 'Ext.data.TreeStore',
model : 'PJ.model.FunctionModel',
autoLoad : true,
root : {
functionDes : '系统功能',
expanded : false
},
proxy : {
type : 'ajax',
url : 'json/Function.json',
reader: {
type: 'json',
successProperty: 'success'
}
}
});
3.点击左菜单,加载对应的功能,这里是UserInfoPanel,xtype就是functionMappingName中内容。
controller:
Ext.define('PJ.controller.MainController',{
extend : 'Ext.app.Controller',
views : ['MainWin','LeftWin','LeftWinFunctionTree','UserInfoPanel'],
stores: ['FunctionStore','UserInfo'],
models: ['FunctionModel','UserInfo'],
init : function(){
this.control({
'leftWinFunctionTree':{
itemclick : this.loadFunction
}
});
},
loadFunction : function(view,rec,item,index,eventObj){
var mainTab = Ext.getCmp('mainView');
//如果已有该id的tab,就激活它
//否则创建
var tab = mainTab.queryById('functionTab'+rec.get('functionId'));
if(tab){
mainTab.setActiveTab(tab);
}else{
tab = mainTab.add({
id: 'functionTab'+rec.get('functionId'),
title: rec.get('functionDes'),
closable: true,
xtype : rec.get('functionMappingName')
}).show();
};
}
});
xtype其实就是系统帮忙初始化了一个实例 ,所以可以直接引用,还是很方便的吧,不过就是必须在controller中声明对应的view,store,model等等一串,这个地方是不是也可以动态声明呢?
有图有真相:
- 大小: 14.4 KB
分享到:
相关推荐
基于EXTJS 4.2 MVC环境搭建,并从后台获取数据在extjs Grid上显示出来
严格按照MVC架构分的曾,可以运行的extJs4.2MVC示例,在myclipse加到一个项目里的的webroot文件夹下,运行index.html即可
demo描述: 1. 页面主框架是左是一个tree,右边是一个tablepanel 2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载...注:需要自己导入Extjs 4.2.x 的文件,该demo是用Extjs 4.2.1 写的
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
去除extjs4.2MVC中的Model层和Store层,使用工厂模式来创建Model层和Store层简化代码。
ExtJS的mvc做得不错,周末2天研究了一下,做了个小例子,有兴趣的同学可以拿来看看,解压后直接在浏览器打开就可以看到效果了。
extjs4.2 desktop mvc下载直接使用
extjs4.2 分页combo动态条数 源码,不懂的加群
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架,其实是个只有大框架的,并没有其他功能,您可能会骂我标题党“通用权限管理系统,通用后台模板”,呵呵,其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
Extjs4.2 动态加载项目(权限模块),直接下载下来即可使用,数据可自动生成。
注:用到了 EXTJS 的 MVC 修改webconfig的sql密碼後 遠行項目 隨便輸入什麼點登錄 會自動生成數據庫 生成數據庫之後執行下面的語句 添加種子數據 --數據庫種子數據 use EXTMVC insert [dbo].[users] values('...
ExtJs4.2没有直接提供下拉树这个组件,但是有例子可以用,文件位置:ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧:默认显示了根节点;达到最小高度时再展开节点,高度不能自动调整。 所以我做了一...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
extjs 4.2 参考书 开发
Extjs4.2入门教程详解,及API文档。
下拉(条件)搜索实例extjs4.2(亲测可用).在前辈的基础上增加了php后台数据的调取整合和下拉搜索的联动
ExtJs4.2正式版