2026年5月6日 星期三

V80E01A - 以 Ext.Tree.Panel 的簡單應用 - 新增節點 - 新增子節點

 目的: V80E01A  - 以 Ext.Tree.Panel & Ext.data.TreeStore 的簡單應用

處理說明: 
     1> 透過 Ext.Tree.Panel 產生  Tree
           var cmp_sub_TreePanel1 = get_cmp_treepanel1("sub_TreePanel1","AIDC",10, myTreeStore);
     2> 直接建 TreeNode - 透過 root
function get_cmp_treepanel1(par_id,par_title, par_flex, par_store) {
    if (checkisnull(par_flex)) {
        par_flex = 10;
    }
    var rtn_cmp =
    {
        xtype: 'treepanel', border: 0,
        id: par_id,
        title: par_title,
        flex: par_flex,
        store: par_store,  //若par_store有值,則會以 par_store 為主,並覆蓋如下 root 的設定
        rootVisible: true,                   
        root: {
            text: par_title,
            expanded: true,
            children: [
                {
                    text: '子節點 1',
                    leaf: true
                },
                {
                    text: '子節點 2',
                    expanded: true,
                    children: [
                        { text: '子節點 2-1', leaf: true },
                        { text: '子節點 2-2', leaf: true }
                    ]
                }
            ]
        }, // end of s_AMM單號

    };
    return rtn_cmp;
};
     3> 透過  Ext.data.TreeStore 建 TreeNode   - 透過 .store
  var myTreeStore =
    {
        xtype: 'treeStore',
        root: {
            text: '根節點A',
            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);

     4> 新增同層節點 :  先取得父節點 , 再由父節點.新增子節點
                     function V80E01A_Add() {
                         var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");
                         var selectedNode = sub_TreePanel1.getSelectionModel().getSelection()[0];
                         if (selectedNode) {
                            var parentNode = selectedNode.parentNode;
                                  parentNode.insertChild(parentNode.indexOf(selectedNode) + 1, {
                                         text: '新同層節點',
                                         leaf: true
                                 });
                           // 如果要立即展開顯示
                          parentNode.expand();
                      }
                     };
     5> 新增子層節點 :
function V80E01A_AddSub() {
var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");
var selectedNode = sub_TreePanel1.getSelectionModel().getSelection()[0];
if (selectedNode) {
//若目前selectedNode為leaf , 則需先設為 false , 否則 appendChild 會無效
if (selectedNode.get('leaf')) {
   selectedNode.set('leaf', false);
};
selectedNode.appendChild({
text: '新子節點',
leaf: true
});
    // 如果要立即展開顯示            
    selectedNode.expand();
   }
};




1>*.js
function CALL_V80E01A() {
    console.log(" 1  顯示 AIDC 組織圖 ");
    //panel11 - 拆檢案專案日期選項
    var myTreeStore =
    {
        xtype: 'treeStore',
        root: {
            text: '根節點A',
            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);
       
    var sub_V80E01A_Flds = [
        {
            type: 'panel', bodyStyle: "background-color:transparent;", border: 5, padding: "1",
            layout: 'border',
            items: [
                {
                    xtype: 'panel', id: 'sub_panelAA1', region: 'center', 
                    height: 100,
                    //layout: { type: 'vbox', align: 'stretch' },
                    layout: { type: 'fit',},
                    items: [
                        cmp_sub_TreePanel1
                    ],
                },               
            ]
        }
    ];

    //2>顯示子畫面 - [列印子畫面]
    var Btns_V80E01A = [
        {
            xtype: 'button', text: '新增同層節點', id: 'AddBtn_V80E01A',
            listeners: {
                click: function (me, e, eOpts) {                    
                    V80E01A_Add();                    
                }
            }
        },
        {
            xtype: 'button', text: '新增子層節點', id: 'AddSubBtn_V80E01A',
            listeners: {
                click: function (me, e, eOpts) {
                    V80E01A_AddSub();
                }
            }
        },
        {
            xtype: 'button', text: '顯示 TreePanel.Store', id: 'ShowStoreBtn_V80E01A',
            listeners: {
                click: function (me, e, eOpts) {
                    V80E01A_ShowStore();
                }
            }
        },
        {
            xtype: 'button', text: '取消', id: 'CancelBtn_V80E01A',
            listeners: {
                click: function () {                    
                    //3>取消時,不重新顯示資料                    
                    this.up("window").close();
                    this.up("window").destroy();
                }
            }
        },
    ];

    //子畫面: mySubFormA
    //var win = getMyWindow("撿料完成", J_formFields_V80E01A, Btns_V80E01A, "F");
    var winAA1 = getMyWindow("顯示 AIDC 公司組織圖 ", sub_V80E01A_Flds, Btns_V80E01A, "AA");
    //win.onshow = Sub1_onShow(np1);
    winAA1.width = 500;
    winAA1.height =500;    
    winAA1.show();

    //將目前所選節點加入子節點
    function V80E01A_AddSub() {
        var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");
        var selectedNode = sub_TreePanel1.getSelectionModel().getSelection()[0];        
        if (selectedNode) {
            if (selectedNode.get('leaf')) {
                selectedNode.set('leaf', false);
            };
            selectedNode.appendChild({
                text: '新子節點',
                leaf: true
            });

            // 如果要立即展開顯示            
            selectedNode.expand();
        }
    };
    //將目前所選節點加入同層節點
    function V80E01A_Add() {
        var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");
        var selectedNode = sub_TreePanel1.getSelectionModel().getSelection()[0];

        if (selectedNode) {
            var parentNode = selectedNode.parentNode;
            parentNode.insertChild(parentNode.indexOf(selectedNode) + 1, {
                text: '新同層節點',
                leaf: true
            });
            // 如果要立即展開顯示
            parentNode.expand();
        }
    };

    function V80E01A_ShowStore() {
        var sub_TreePanel1 = Ext.getCmp("sub_TreePanel1");
        console.log("sub_TreePanel1.store", sub_TreePanel1.store);
    };

};  // end of  function CALL_V80E01A() {



張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)