V80E01A - 以 Ext.Tree.Panel 建立公司組織圖 - TreeView

 目的: V80E01A 以 Ext.Tree.Panel & Ext.data.TreeStore 建立公司組織圖

處理說明: 1>TreeView : 利用 [Ext.Tree.Panel] 元件

                  2>若 TreeView 要由後端資料庫取得節點資料,則透過 .store.proxy  取得後端資料

                       部門下層節點資料 SQL :  存取該部門下層 DEP 及該部門員工                  

                       (HR_DEPHIRCH/HR_DEP/HR_EMPLYM) , SQL如下

                  3> DoubleClick節點展開: 

                       Ext.Tree.Panel元件已設計好, DoubleClick 節點時,

                       會呼叫 proxy , 觸發 beforeload event 

                       只要重傳傳入參數(=部門ID) , 透過 proxy.url 重新取得下層節點SQL即可

                       該元件會依 proxy 傳回資料,自動建置該節點下層節點                        

2>SQL如下:

SQL:

SELECT  'DEP' as TYPE,B.DPRTID as P_DEPID,A.DEPID as ID,A.DEPNM as NM        

FROM    HR_DEP A, HR_DEPHIRCH B      

WHERE   A.DEPID = B.DEPID      

AND     B.DPRTID = '800'    

union       

SELECT  'EMP' as TYPE,C.DEPID as P_DEPID,C.EMPLYID as ID,C.EMPLYNM as NM

FROM    HR_EMPLYM C     

WHERE  C.DEPID = '800'  

ORDER BY TYPE DESC,ID; 

1>*.js

function CALL_V80E01A() {

    console.log(" 1  顯示 AIDC 組織圖 ");

    //panel11 - 拆檢案專案日期選項

    var myTreeStore =

    {

        xtype: 'treeStore',

        proxy: {

            type: 'ajax',

            url: '../api/V80E01AAPI/get_sub_TreeData1',

            actionMethods: { read: 'POST' },   // 改成 POST

            reader: { type: 'json' },

        },

        root: {

            id:'AIDC',

            text: 'AIDC',

            expanded: true,

            children: [

                { text: '節點 A1', leaf: true },

                {

                    text: '節點 A2', expanded: true, children: [

                        { text: '節點 A2-1', leaf: true }

                    ]

                }

            ]

        }

    };

    

     var cmp_sub_TreePanel1 = get_cmp_treepanel1("sub_TreePanel1","AIDC",10, myTreeStore);

 //透過連接資料庫,取得 TreeView 節點資訊

var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");

function V80E01A_StoreProxy() {

        var np = {};

        np["cur_DEPID"] = "AIDC";

        sub_TreePanel1.store.getProxy().url = '../api/V80E01AAPI/get_sub_TreeData1',

        sub_TreePanel1.store.getProxy().extraParams = np;　//分頁OK,篩選條件OK

        sub_TreePanel1.store.load();

    };

    sub_TreePanel1.on('beforeload', function (store, operation) {

        

        // operation.node 是目前要展開的節點

        var np = {};

        np["cur_DEPID"] = operation.node.data.id;

        if (operation.node.hasChildNodes())

            return;

        sub_TreePanel1.store.getProxy().extraParams = np;  //設定 extraParams ,重新會呼叫 URL

    });