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一致，可是具體例子寫下來仍是有些區別的