Extjs5項目進行中(二)

標籤：des   blog   http   io   os   ar   for   資料   2014   

 

先看看頁面效果：

 

菜單和菜單的子頁面是分開載入的。頁面代碼如下：

注意：樹形結構設定為：001,001001,001001001。當前載入的是所有頁面資訊。所以，資料來源綁定的時候，要分開操作。先綁定根節點，再根據根節點遞迴當前根節點的所有子節點。

Ext.define(‘Lz.view.Main.mainLeftTree‘, {
　　extend: ‘Ext.panel.Panel‘,
　　xtype: ‘MenuTree‘,
　　layout: {
　　　　type: ‘accordion‘,
　　　　titleCollapse: true,
　　　　animate: true,
　　　　fill: true
　　},
　　items: [],
　　//擷取菜單資料來源
　　initComponent: function () {
　　　　var fields = [];
　　　　Ext.Ajax.request({
　　　　　　async: false,
　　　　　　url: ‘/WebService/Systems/SystemPageInfo.asmx/GetPageInfo‘,
　　　　　　params: {},
　　　　　　method: ‘POST‘,
　　　　　　success: function (response, otps) {
　　　　　　　　var json =JSON.parse(response.responseText);
　　　　　　　　fields = json;
　　　　　　}
　　　　});
　　　　var itemArr=[];
　　　　for (var i = 0; i < fields.length; i++) {
　　　　　　//id長度為3則為功能表項目根節點。進入載入子節點
　　　　　　if (fields[i].page_id.length == 3) {
　　　　　　var nodes = new Array();
　　　　　　nodes = getTreeNodesItem(fields, fields[i].page_id, 3, nodes);

　　　　　　//定義樹的treestore
　　　　　　var store = Ext.create(‘Ext.data.TreeStore‘, {
　　　　　　　　root: {
　　　　　　　　　　expanded: true,
　　　　　　　　　　children: nodes//朋友說這樣載入不好，我也不知道到底怎麼載入比較好，暫時先用著。
　　　　　　　　}
　　　　　　})
　　　　//定義treepanel
　　　　var tree = Ext.create(‘Ext.tree.Panel‘, {
　　　　　　store: store,
　　　　　　xtype: ‘treepanel‘,
　　　　　　rootVisible: false,
　　　　　　titleCollapse:true,
　　　　　　autoScroll: true,

　　　　　　//單擊事件，單擊開啟頁面，暫時開啟的都是同一個頁面
　　　　　　listeners: {
　　　　　　　　‘itemclick‘: function (obj, model, items, index, e) {
　　　　　　　　　　ShowPanel(obj, model, items, index, e);
　　　　　　　　}
　　　　　　},
　　　　renderTo: Ext.getBody()
　　　　});

　　　　//為菜單添加根節點
　　　　var item = {};
　　　　item.title = fields[i].page_name;
　　　　item.items = [tree];
　　　　item.layout= ‘fit‘;
　　　　itemArr.push(item);
　　}
}
this.items = itemArr;
this.callParent(arguments);
}

});

function ShowPanel(me, rec, item, index, e) {
　　var mainPanel = Ext.getCmp(‘centerTabPanel‘);
　　var parentNode = rec.parentNode;
　　var path = rec.get(‘page_url‘);
　　var text = rec.get(‘text‘);
　　if (!rec.isLeaf()) {
　　　　return;
　　}

　　path = ‘Lz.view.Systems.PageManagerView‘;

　　var thisPanel = Ext.getCmp(‘mainLeftTree‘ + ‘Tab‘);
　　if (!thisPanel) {
　　　　thisPanel = new Ext.create(path, {
　　　　　　id: ‘mainLeftTree‘ + ‘Tab‘,
　　　　　　title: text
　　　　});
　　　　mainPanel.add(thisPanel).show();
　　} else {
　　　　mainPanel.setActiveTab(thisPanel);
　　}
}

//遞迴遍曆當前根節點下面所有子節點
function getTreeNodesItem(obj,pageid,lens,nodes)
{
　　for (var i = 0; i < obj.length; i++)
　　{
　　　　if (obj[i].page_id.length == (lens + 3) && obj[i].page_id.substring(0, lens) == pageid)
　　　　{
　　　　　　var node = {};
　　　　　　node.parentId = pageid;
　　　　　　node.id = obj[i].page_id;
　　　　　　node.text = obj[i].page_name;

　　　　　　node.leaf = true;
　　　　　　node.children = new Array();
　　　　　　nodes.push(node);
　　　　　　getTreeNodesItem(obj, obj[i].page_id, obj[i].page_id.length, nodes);
　　　　}
　　}
　　return updateTreeNodesItemLeaf(nodes);
}

//迴圈將最後一個子節點leaf 改為false

function updateTreeNodesItemLeaf(nodes)
{
　　for (var i = nodes.length - 1; i >= 0; i--) {
　　　　var currentNode = nodes[i];

　　　　if (currentNode.parentId == "") {
　　　　　　continue;
　　　　}

　　　　var parent = getParent(currentNode, nodes);

　　　　if (parent == null) {
　　　　　　continue;
　　　　}
　　　　parent.leaf = false;
　　　　parent.children.push(currentNode);
　　　　nodes.splice(i, 1);
　　}

　　return nodes;
}

function getParent(child, nodes) {
　　var parent = null;
　　for (var i = 0; i < nodes.length; i++) {
　　　　if (nodes[i].id === child.parentId) {
　　　　　　return nodes[i];
　　　　}
　　}
　　return parent;
}

 

　　

Extjs5項目進行中(二)