使用layout点击west的tree的链接在center中显示并不弹出新的页面(已解决)

请教一个问题，如果我使用ext的layout，在west部分又添加了一个tree，我怎么才能做到当点击tree的node的链接，使得其要显示的部分在我的layout的center中显示并且不弹出一个新的页面呢？

tree.on('click', function (node){
            Ext.get('center-iframe').dom.src = node.attributes.href;
});

新建一个ContentPanel,然后在layout中相应的区域中add就可以了...

// create the main layout
            layout = new YAHOO.ext.BorderLayout(document.body, {
                north: {
                    split:false,
                    initialSize: 32,
                    titlebar: false
                },
                west: {
                    split:true,
                    initialSize: 250,
                    minSize: 175,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    useShim:true,
                    cmargins: {top:2,bottom:2,right:2,left:2}
                },
                center: {
                    titlebar: false,
                    title: '操作区',
                    autoScroll:false,
                    tabPosition: 'top',
                    closeOnTab: true,
                    alwaysShowTabs: true,
                    resizeTabs: true
                }
            });
var iframe = YAHOO.ext.DomHelper.append(document.body, 
    		            {tag: 'iframe', frameBorder: 0, src: el.href});
var panel = new YAHOO.ext.ContentPanel(iframe, 
    		            {title: el.innerHTML, fitToFrame:true, closable:true});
layout.getRegion('center').add(panel);

layout.getRegion('center')是取得你设置layout里的相关区域

以下是我的代码。

Ext.onReady(function(){
   // a bunch of private variables accessible by member function
    var layout;
    var viewContent;
    var viewTree;
    var Tree = Ext.tree;
    var tree = new Tree.TreePanel('tree-div', {
        animate:true, 
        loader: new Tree.TreeLoader({
        	dataUrl:'http://localhost:8088/myoa/servlet/TreeServlet'
        }),
        enableDD:true,
        containerScroll: true
    });
    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: 'svg',
        draggable:false,
        leaf:false,
        id:'source'
    });   
   
    	tree.setRootNode(root);
	    tree.render();
		root.expand();

    tree.on('click', function (node){
	    Ext.get('center-iframe').dom.src = node.attributes.href;
 	});

        // initialize state manager, we will use cookies
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
         // create the main layout
         layout = new Ext.BorderLayout(document.body, {
                west: {
                    split:true,
                    initialSize: 200,
                    minSize: 175,
                    maxSize: 400,
                    titlebar: true,
                    collapsible: true,
                    animate: true,
                    autoScroll:false,
                    useShim:true,
                    cmargins: {top:0,bottom:2,right:2,left:2}
                },
                center: {
                    titlebar: false,
                    autoScroll:false,
                    closeOnTab: true,
                    alwaysShowTabs: false,
                    resizeTabs: true
                }
            });
            layout.beginUpdate();
            layout.add('center',viewContent= new Ext.ContentPanel('center-div',{fitToFrame:true,autoScroll: true, resizeEl: 'center-iframe'}));
            layout.add('west', viewTree =new Ext.ContentPanel('west-div', {title: 'SVG适时监控', fitToFrame:true}));
            layout.restoreState();
            layout.endUpdate();      
});

还有，我用的是ext1.1， 不是YUI

使用JSON-lib得到json的代码：

	public String getTree(){
		TreeNode node1 = new TreeNode();
		node1.setId("node1");
		node1.setText("节点1");
		node1.setLeaf(true);
		node1.setHref("http://www.zhuaxia.com");
		
		TreeNode node2 = new TreeNode();
		node2.setId("node2");
		node2.setText("节点2");
		node2.setLeaf(true);
		node2.setHref("http://www.tudou.com");

		TreeNode node3 = new TreeNode();
		node3.setId("node3");
		node3.setText("节点3");
		node3.setLeaf(false);
		node3.setHref("http://www.126.com");

		TreeNode node4 = new TreeNode();
		node4.setId("node4");
		node4.setText("节点4");
		node4.setLeaf(false);
		node4.setHref("http://www.sohu.com");

		TreeNode node5 = new TreeNode();
		node5.setId("node5");
		node5.setText("节点5");
		node5.setLeaf(true);
		node5.setHref("http://www.douban.com");

		List<TreeNode> list1 = new ArrayList<TreeNode>();
		List<TreeNode> list2 = new ArrayList<TreeNode>();
	
		list1.add(node1);
		list1.add(node2);
		
		list2.add(node5);
		
		node3.setChildren(list1);
		node4.setChildren(list2);
		
		List<TreeNode> list3 = new ArrayList<TreeNode>();
		list3.add(node3);
		list3.add(node4);
		
		JSONArray jsonArray = JSONArray.fromObject(list3);
		System.out.println(jsonArray.toString());

		return jsonArray.toString();
	}

添加以下代码：

	    tree.on('click', function (node){	
	    	if(node.isLeaf()){   
		        Ext.get('center-iframe').dom.src = node.attributes.myprop;
		    }
	 	});

关键是myprop这个属性。我以前是用href属性保存链接地址，有问题，现在自己添加了一个新的属性保存链接就没问题了。

不是href的问题，也不需要另外加属性字段来保存链接地址


tree.on('click', function (node){
if(node.isLeaf()){
Ext.get('center-iframe').dom.src = node.attributes.myprop;
}
else{
node.onclick();
}
},null,{stopEvent:true}); 我也是刚看Ext文档，记得有这样的约束用法，表示原对象的Onclick事件不再触发，而只执行用户定义的函数。我也没到页面上试试

不是href的问题，也不需要另外加属性字段来保存链接地址

用
tree.on('click', function (node){
if(node.isLeaf()){
Ext.get('center-iframe').dom.src = node.attributes.href;
}
},null,{delegate: 'a', stopEvent:true}); 试试，我也是刚看Ext文档，记得有这样的约束用法，表示原对象的Onclick事件不再触发，而只执行用户定义的函数。

可否把html页面代码贴出来看看。center-iframe是个frame还是个div?

Ext.get('xxiframe').dom.src = node.attributes.href; 不行，
应该用Ext.get('xxiframe').dom.src = node.attributes.hrefTarget;

href会在新窗口中打开链接，hrefTarget会在对应iframe中打开链接。可以设置ifame的css style="width:100%;height:100%" 来自调整大小