jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 » JavaScript 討論 » 請問extjs tree 問題

awelkije 發表於 2010-5-26 20:08

請問extjs tree 問題

[code]
var menuTree = new Ext.tree.TreePanel({
   region:'west',
   title:'選單',
   width:180,
   minSize:150,
   maxSize:200,
   split:true,
   autoScroll:true,
   autoHeight:false,
   collapsible:true,
   rootVisable:true,
   root:new Ext.tree.TreeNode({
      id:'root',
      text:'訪客人數',
      draggable:false,
      expanded:true
   })
   
   
});


menuTree.root.appendChild(new Ext.tree.TreeNode({
   id:'htmlPanel',
   text:'選單A',
   listeners:{
      'click':function(node, event) {
         event.stopEvent();
         var n = contentPanel.getComponent(node.id);
         if (!n) { //判断是否已经打开该面板
            n = contentPanel.add({
               'id':node.id,
               'title':node.text,
               closable:true,  //通过html载入目标页
               html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="a.html"></iframe>'
            });
         }
         contentPanel.setActiveTab(n);
      }
   }
}));


menuTree.root.appendChild(new Ext.tree.TreeNode({
   id:'htmlPanel2',
   text:'選單B',
   listeners:{
      'click':function(node, event) {
         event.stopEvent();
         var n = contentPanel.getComponent(node.id);
         if (!n) { //判断是否已经打开该面板
            n = contentPanel.add({
               'id':node.id,
               'title':node.text,
               closable:true,  //通过html载入目标页
               html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="b.html"></iframe>'
            });
         }
         contentPanel.setActiveTab(n);
      }
   }
}));

menuTree.root.appendChild(new Ext.tree.TreeNode({
   id:'htmlPanel3',
   text:'選單C',

   listeners:{
      'click':function(node, event) {
         event.stopEvent();
         var n = contentPanel.getComponent(node.id);
         if (!n) { //判断是否已经打开该面板
            n = contentPanel.add({
               'id':node.id,
               'title':node.text,
               closable:true,  //通过html载入目标页
               html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="c.html"></iframe>'
            });
         }
         contentPanel.setActiveTab(n);
      }
   }
}));
[/code]請問要如何精簡掉重複的程式碼
點
選單A 會開啟 a.html
選單B 會開啟 b.html
選單C 會開啟 c.html

wmh 發表於 2010-5-27 01:28

可以把規則定好，例如每個 TreeNode 都有個 href 的屬性，分別記錄 a.html, b.html, c.html...

事件統一在 TreePanel 處理：
[code js]
menuTree.on('click', function(node, e) {
    e.stopEvent();
    var src = node.attributes.href;
    //...
});
[/code]

awelkije 發表於 2010-5-28 09:48

哇 真是感激不盡阿

查看完整版本: 請問extjs tree 問題