抱歉，最近比較忙，更新的比較慢~
=========================分隔線====================================
流量系統，是開放給內部所有用戶使用，用於查詢網站相關流量數據。
Boss們需要能看到所有欄目的所有流量數據，而普通編輯們，則只能查看自己負責欄目的流量數據；
管理員需要給所有人設置權限的權限；
。。。。。。
對於普通的Web應用程序或MVC來說，可以通過控制html元素的顯示與否、可用與否來實現權限。
而對於ExtJs來說，如何實現就是另一回事了。
=========================分隔線====================================
先來看看有哪些地方需要配置權限吧。
左邊手風琴有三個部分，Accordion控件不像Tree一樣，可以從服務端加載數據生成控件，它只能手動的逐個添加子項。
所以要實現權限控制，只好從服務端加載完權限信息后，再來控制各部分顯示與否。
另外，如果手風琴的子項內，也就是內部的Tree控件，沒有任何節點的話，則自動將該子項隱藏。
Ext.define('Yiqi.Main.SysSetTree', {
extend: 'Ext.tree.Panel',
requires: ['Yiqi.Common.Model.FunctionMenu'],
parentId: 2,
loadUrl: '',
initComponent: function () {
this.loadMask = new Ext.LoadMask(this, { msg: '加載中...' });
this.buildStore();
var me = this;
Ext.apply(this, {
rootVisible: false,
lines: false,
store: this.dataStore,
listeners: {
itemclick: this.onItemClick,
beforeitemexpand: function () {
me.loadMask.show();
},
itemexpand: function () {
me.loadMask.hide();
},
load: function (store, obj, records, eOpts) {
if (!me.loadMask.isHidden()) {
me.loadMask.hide();
}
if (records.length <= 0) {
me.ownerCt.remove(me);//--如果沒有子項，則隱藏
}
}
}
});
this.callParent(arguments);
}
});
各部分里邊的內容，都是Tree控件，這個不用多說也能想到，直接在服務端返回可用的就行。
權限配置功能也比較簡單。
=========================分隔線====================================
左側手風琴比較簡單。
而下邊這個，就比較麻煩了。
這是哪？這是流量數據顯示界面頂部的工具條（Toolbar），用於切換數據顯示。
是的，並非所有欄目的功能都一樣。
比如：某些欄目才有地理信息統計，某些欄目才有訪問排行。。。。。。
如果在左側加一個Tree控件來顯示所有功能的話，那么就簡單多了，對吧。
但這樣的話，就嚴重擠壓了圖表的空間，對於這樣一個系統，圖表及數據的展示，才是重點。
而在頂部以一個工具條的方式顯示菜單的話，似乎就簡潔多了。。。
好吧，那就這么干吧。。。
=========================分隔線====================================
一般Toolbar都是固定的，而基於服務端數據的Toolbar則是靈活的。
對Toolbar子組件的類型，有三種要求：
1、純分組用，就像文件夾一樣；
2、帶功能的分組，即有子組件的按鈕，在ExtJs里，叫SplitButton。
3、就是純按鈕了。
先看一下用來加載Toolbar的數據是什么樣的。
功能地址：就是點擊按鈕后，會加載的功能地址，也是功能對應的js文件路徑。這個在之前的文章里也說過。
可以看到，有些項目的功能地址是空的，沒錯，就是用這個字段來區別類型。
有子項目，功能地址為空，則說明是純分組用的；有子項目，功能地址也不為空，則說明是帶分組的功能按鈕；沒有子項目的就是純按鈕咯。
=========================分隔線====================================
從服務端加載好這些數據后，逐一循環，根據這個規則來決定ExtJs需要創建的類型，創建完成，再add到Toolbar里。
當然，理論上支持無限級子菜單。
Ext.define('Yiqi.Show.Catagory.FunctionToolBar', {
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.functionbar',
catagoryId: 1,
loadStatics: function (path, scope) { },
handlerScope: null,
initComponent: function () {
Ext.apply(this, {
items: [
//--一加載就顯示Loading，提高用戶體驗
{ xtype: 'displayfield', value: '<img src="/Scripts/ext4.2/resources/themes/images/default/grid/loading.gif"/> 菜單加載中......' }
]
});
this.callParent(arguments);
},
afterRender: function () {
//--渲染完成后，再從服務端加載數據，並創建Toolbar
this.loadEnabledMenu();
this.callParent(arguments);
},
loadEnabledMenu: function () {
var me = this;
Ext.Ajax.request({
url: '/FunctionMenu/GetEnabledList',
params: {
catagoryId: me.catagoryId
},
method: 'POST',
success: function (response, opts) {
Yiqi.Common.Tools.IsLogin(response);
var result = Ext.decode(response.responseText);
var menu = me.buildMenu(result);
me.removeAll(true);
me.add(menu);
},
failure: function (response, opts) {
Ext.Msg.alert("提示", "保存失敗（報錯）~！");
}
});
},
buildMenu: function (list) {
var me = this;
var menu = [];
//--循環所有
Ext.Array.each(list, function (m) {
menu.push(me.createSingle(m));
});
return menu;
},
createSingle: function (data) {
var me = this;
var menu = {};
//--功能地址不為空
if (!Ext.isEmpty(data.LoadPath, true) && Ext.String.trim(data.LoadPath).length > 0) {
if (data.Children.length > 0) {
menu.xtype = 'splitbutton';
}
if (me.handlerScope) {
menu.scope = me.handlerScope;
}
menu.handler = function () {
this.createItem(data.LoadPath, menu);
//me.loadStatics(data.LoadPath, menu);
}
}
menu.text = data.text;
menu.iconCls = data.iconCls;
//--有子菜單，則繼續循環
if (data.Children.length > 0) {
var childMenu = me.buildMenu(data.Children);
menu.menu = {
items: childMenu
};
}
return menu;
}
});