V80E01A - 以 Ext.Tree.Panel 的應用 - 以 資料庫欄位建位 TreeView - store.proxy

 目的: V80E01A -以 Ext.Tree.Panel & Ext.data.TreeStore 的應用 
             -以資料庫欄位建位 TreeView - store.proxy

處理說明: 1>資料庫結構 - HR_DEP & HR_EMPLYM & HR_DEPHIRCH

                  2>設  Ext.data.TreeStore 元件 - proxy / type / reader / actionMethods 的欄位值

                       proxy: {

            type: 'ajax',

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

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

            reader: { type: 'json' },

        }

       3> 將 Ext.tree.Panel.store  設定成 myTreeStore         

            var cmp_sub_TreePanel1 =  

                   get_cmp_treepanel1("sub_TreePanel1","AIDC",10, myTreeStore);                           

       4>Ext.tree.Panel - DoubleClick 節點時,      

           會自動呼叫 URL (store.proxy.url) 讀取下層節點

SQL:

SELECT  B.DPRTID as P_DEPID,A.DEPID as ID,A.DEPNM as NM,0 as leaf ,2 as itm      

FROM     HR_DEP A, HR_DEPHIRCH B

WHERE  A.DEPID=B.DEPID

AND       B.DPRTID='800'

union

SELECT  C.DEPID as P_DEPID,C.EMPLYID as ID,C.EMPLYNM as NM,1 as leaf, 1 as itm

FROM     HR_EMPLYM C

WHERE  C.DEPID='800'

ORDER   BY itm,ID;

            2>store.proxy 的應用

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 }

                    ]

                }

            ]

        }

    };

    

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

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

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;

        //store.getProxy().setExtraParams(np);

    });

//

 //[顯示公司組織圖]鈕- 透過連接資料庫,取得 TreeView 節點資訊

    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();

    };