extjs5相关典型特效的实现

这里写一些具体特效的实现，这个框架主要用于作比较复杂的企业管理系统，外层的框架搭建好后，开发只须要关注center部分的界面和业务逻辑便可，因此我介绍一些框架的一些实现；

外围框架的特效影响到总体的用户体验，作好后使用起来很爽，不然总会感受蛋疼，本例程center区域支持iframe和application组件，建议都是用application组件，整个应用都在一个界面上完成

废话少说，总体界面是这样的

1，树状导航单击展开关闭

我以前参考了extjs4.x的单击事件，关键是要获取node对象，而后就能够判断是否叶子节点是否展开等内容，可是extjs5的itemclick事件没有node对象，因而查阅了相关代码后，发现实际上record对象自己就具备node的全部方法和属性，直接操做它就好了具体代码以下

// 导航节点点击事件  
		itemclick: function(view,record,item,index,event,object){
			var itemId = record.data.itemId ;    
		    var text = record.data.text ;    
		    var tabPanel = Ext.getCmp('index_tab');  
		    
		    
		    // 单击节点事件(node是节点对象)
		    if(!record.isLeaf()){
		    	// 不是叶子节点
		    	record.singleClickExpand = true;// 提供单击属性
		    	if(record.isExpanded()){
		    		// 节点是展开的状况
		    		record.collapse(true);// 闭合该节点
		    	}
		    	else{
		    		record.expand(true);// 展开该节点
		    	}
		    }
		    else{
		    	//是叶子节点
		    	//先判断是否已经打开，若是已经打开，则不执行下边的语句
		    	if(!itemId)
		    		return;
			    var isOpen = tabPanel.queryById(itemId);
			    if (isOpen){
			    	tabPanel.setActiveTab(isOpen);
			    	return;
			    }
                  }
                }

2，中间tabpanel的双击关闭标签，注意写法哈

centerPanel.tabConfig= {
		listeners:{
			dblclick: {fn: function(element){
				tabPanel.remove(centerPanel);  
			}, element: 'el'}
		}
	};

3，tab右键增长关闭当前，关闭其余，关闭全部；多个tab能够随意拖动交换位置

这块的实现须要用到Ext.ux包里的扩展实现，请你们拷贝你的extjs5下examples包下边的ux包，而后引入TabReorderer和TabReorderer，固然这两个js会依赖其它的js，因此你最好把整个包直接考进来，而后用requires数组引入就好了

在extjs4里面这样的方法不行，右键会有问题，因此我怀疑extjs4的扩展包实现有bug

{
        	xtype: 'tabpanel',
            region: 'center',
            id:'index_tab',
            itemId: 'contentPanel',
            layout:"fit",
            activeTab: 0,
            plugins:[
                  Ext.create('Ext.ux.TabReorderer'),
                  Ext.create('Ext.ux.TabCloseMenu',{
                      closeTabText: '关闭当前标签',
                      closeOthersTabsText: '关闭其余标签',
                      closeAllTabsText: '关闭全部标签'
                  })
            ]
		}

4，center区域既能够加载iframe，也能够加载extjs组件，从而整个application均只有一个页面；

实现方式是写一个itemclick函数，在view的属性里设置是不是html，而后若是是html的话，读取data属性直接加载其为iframe展现出来便可，若是不是html，则读取data加载其为extjs组件，treestore里代码以下

children: [
		{
			itemId:'user_import',
			text: '用户导入',
			isHtml:true,
			data:'/backend/index.html',
			leaf: true
		},
		{
			text: '流程审批',
			itemId:'workflow_shenpi',
			isHtml:false,
			data:'backend.view.grid.GridView',
			leaf: true
		},

controller里的代码以下：

if(isHtml){
	var centerPanel = Ext.create('backend.view.index.region.CenterView');
	centerPanel.id=itemId;
	centerPanel.title=text;
	centerPanel.closable=true;
	centerPanel.tabConfig= {
		listeners:{
			dblclick: {fn: function(element){
				tabPanel.remove(centerPanel);  
			}, element: 'el'}
		}
	};
	centerPanel.html='<iframe src="'+data+'" frameborder="0" width="100%" height="100%"  scrolling="auto"></iframe>';
	tabPanel.add(centerPanel);
	tabPanel.setActiveTab(centerPanel);
	tabPanel.listeners = {
		itemcontextmenu: Ext.create('backend.view.index.region.RightMenu')
	};
}
else{
	var centerPanel = Ext.create(data);
	centerPanel.id=itemId;
	centerPanel.title=text;
	centerPanel.closable=true;
	centerPanel.tabConfig= {
		listeners:{
			dblclick: {fn: function(element){
				tabPanel.remove(centerPanel);  
			}, element: 'el'}
		}
	};
	
	tabPanel.add(centerPanel);
	tabPanel.setActiveTab(centerPanel);
	
}

extjs5的mvvm模式开发例程，后续介绍，总之思想跟微软wpf的mvvm一致，可是具体例子写下来仍是有些区别的