EXTJS4.0MVC模式导航栏制作

来源：互联网发布：淘宝爆仓是什么意思编辑：程序博客网时间：2024/05/18 03:33

ExtJS4.0 MVC模式下导航栏的搭建

文件结构目录：

Model层和Store直接合在一起使用了，目前接触到的项目没必要将Model和Store进行分离所以这边的搭建Demo为了偷懒把Store和Model合成在一起使用了。

main.js:

Ext.onReady(function() {// 开启悬浮提示功能Ext.QuickTips.init();// 开启动态加载Ext.Loader.setConfig({enabled : true});// 创建应用程序的实例Ext.application({// 设定命名空间name : 'Demo',// 指定配置选项，设置相应的路径appFolder : 'Demo',// 加载控制器 controllers : ['menuController','homeController'],launch : function() {Ext.create('Ext.container.Viewport', {layout : 'fit',style : 'padding:0px',items : [{xtype : 'container',layout : 'border',items : [{title : 'ExtJS案例',collapisble : true,region : 'north',height : 100,html : '<br><center><font size=5>导航demo</font><br><font size=2>hello world</font></center>'}, {xtype:'menuView',region : 'west'}, {xtype:'tabpanel',region : 'center',layout : 'fit',                          tabWidth : 120,                          items : [] }]}]});}});});

menuView.js:

Ext.define('Demo.view.menuView',{extend: 'Ext.panel.Panel',requires:'Demo.view.menuComponent',alias: 'widget.menuView',title:'系统设置',collapsible:true,split:true,rootVisible : false,width:200,//手风琴格式layout:'accordion',layoutConfig:{//设置为点击整个标题栏都可以收缩titleCollapse:true,//开启默认动画效果animate:true,//展开的面板总是在最顶层   activeOnTop:true},initComponent: function() {this.callParent(arguments);}});

menuComponent.js

Ext.define('Demo.view.menuComponent', {extend : 'Ext.tree.Panel',alias : 'widget.menucomponent',useArrows : false,singleExpand : false,rootVisible : false,initComponent : function() {this.callParent(arguments);}});

menuControl.js:

Ext.define('Demo.controller.menuController', {    extend: 'Ext.app.Controller',    views:['menuView'],    init: function() {    this.control({            'menuView': {                beforerender: this.onRender            },            'menucomponent':{                itemclick: this.onClick            }        });    },        onClick:function(view, record, item, index, e, eOpts)    {    var tabs=view.up('panel').up('panel').up('container').down('tabpanel');//    var tab=Ext.getCmp(record.data.id);//    console.log(tab);    if(!Ext.getCmp(record.data.id))    {    tabs.add(        {        xtype:'',        id:record.data.id,         closable: true,         title:record.data.text        });    tabs.setActiveTab(Ext.getCmp(record.data.id));    }    else    {    tabs.setActiveTab(Ext.getCmp(record.data.id));    }        },    onRender:function(view,record){var treeStore1 = Ext.create('Ext.data.TreeStore', {root : {children : [ {text : "你再看我",id:'5',aa : 'aa',leaf : true}, {text : "你再看我",id:'6',leaf : true}, {text : "就把你吃掉",id:'7',leaf : true} ]}});var treeStore = Ext.create('Ext.data.TreeStore', {root : {children : [ {text : "人才管理",id:'1',aa : 'aa',leaf : true}, {text : "资材管理",id:'2',leaf : true}, {text : "角色管理",id:'3',leaf : true} ]}});view.add({xtype: 'menucomponent',            title: '我是导游',            useArrows: false,            lines: false,//            iconCls: node.iconCls,            store: treeStore1});view.add({xtype: 'menucomponent',            title: '我的导航栏',            useArrows: false,            lines: false,//            iconCls: node.iconCls,            store: treeStore}).show()}

效果图:

TAB内容可以自己添加，可以是grid等等,也可以自的pannel带布局添加的位置在menuControl.js 中

onClick:function(view, record, item, index, e, eOpts)    {    var tabs=view.up('panel').up('panel').up('container').down('tabpanel');//    var tab=Ext.getCmp(record.data.id);//    console.log(tab);    if(!Ext.getCmp(record.data.id))    {    tabs.add(        {        xtype:'',        id:record.data.id,         closable: true,         title:record.data.text        });    tabs.setActiveTab(Ext.getCmp(record.data.id));    }    else    {    tabs.setActiveTab(Ext.getCmp(record.data.id));    }        },

中将xtype中的组件更改为自己创建的组件模板就行了

0 0