當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

我的ExtJS学习之路 ——4

發(fā)布時間：2023/11/27 生活经验 18 豆豆

生活随笔收集整理的這篇文章主要介紹了我的ExtJS学习之路 ——4 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

項目基本架子出來，然后就該考慮將封裝好的gridpanel 和 tabpanel關(guān)聯(lián)起來

既點擊樹的葉子節(jié)點，將 gridpanel 展現(xiàn)在 tabpanel中

怎么關(guān)聯(lián)呢？

【在之前的基礎(chǔ)上的，重復的代碼就不貼出來了】

我改變了模擬數(shù)據(jù)的形式，注意id的變化，和上期的不一樣

[
    {id:'Ext.cjl.TestGrid_testgrid',text:'菜單-1',leaf:true}
]

id用下劃線隔開，前面是封裝好的表格，后面是表格在項目中唯一的id編號

然后在 index.js，添加樹節(jié)點的點擊事件

var menus= new Ext.tree.TreePanel({
        id:'menus',
        loader: new Ext.tree.TreeLoader({
            dataUrl: 'temp/tree.txt'
            }),
        title:'菜單',
        rootVisible:false,
        region:'west',
        split:true,
        border:true,
        collapsible:true,
        listeners : {
            'click': function(node, event) {
                clickNode(node,event);
            }
        }
    });

項目使用的統(tǒng)一的點擊節(jié)點的方法，clickNode，在index.html中的定義

function clickNode(node,event){
    event.stopEvent();
var tempId=node.id.split('_');
var entityClass=tempId[0];
var entityId=tempId[1];
//葉子節(jié)點
    if(node.leaf==true){
var tabs=Ext.getCmp('centertabpanel');
var n = tabs.getItem(entityId);
var tempGrid=null;
var object = 'new ' + entityClass+'();';
if(!n){
            n = tabs.add(eval(object));
            tabs.activate(n);
        }
        tabs.setActiveTab(n);
    }
//枝
    else{
        node.toggle();
    }
}

獲取節(jié)點對應的class 和 id，如果tabpanel中有，獲取焦點，顯示出來；不存在，new新的，獲取焦點

然后之前的封裝好的，表格gridpanel，就可以添加發(fā)的 tabpanel中了。

轉(zhuǎn)載于:https://www.cnblogs.com/chenjinlong/archive/2012/02/24/2366181.html

總結(jié)

以上是生活随笔為你收集整理的我的ExtJS学习之路 ——4的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

之路
ExtJs