EXTJS4.0MVC模式导航栏制作

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中的组件更改为自己创建的组件模板就行了