ext中点击树的叶子结点，如何装载展现aspx页面文件

linger_liang 2009-09-14 11:59:17

开发环境ext+.net
我要做一个界面，左边是一个静态树，右边是一个空白面板，当点击树的叶子结点的时候，右边面板就会装载一个aspx页面文件，这样的布局我要怎么做呢?

...全文

68 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2009-09-14

打赏
举报

搜索下
网上这样的例子比比皆是

hookee 2009-09-14

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=gb2312" http-equiv="Content-Type" />

<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />

<style type="text/css">

<!--

-->

</style>

<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="extjs/ext-all.js"></script>

<script type="text/javascript">

var tree;

function treeNodeFromXml(oXmlEl) {

    if(oXmlEl.nodeType != 1) return null;

    var oCfg;

    oCfg = {text:oXmlEl.getAttribute("name")};

    oCfg.expanded = true;

    var oNode = new Ext.tree.TreeNode(oCfg);

    oNode.attributes = {

    	href1:oXmlEl.getAttribute("href"),

    	hrefTarget:"mf"

    };

    oNode.on("click", goHandler);

    for(var i=0;i<oXmlEl.childNodes.length;i++){

        if (oXmlEl.childNodes[i].nodeType == 1) {

            var oChild = treeNodeFromXml(oXmlEl.childNodes[i]);

            if (oChild) oNode.appendChild(oChild);

        }

    }

    return oNode;

}

function goHandler(obj){

	if(obj.attributes.href1 != "#") mf.location.href=obj.attributes.href1;

	else return false;

}

var cfgVP = {

	layout:'border',

	defaults:{split:true,bodyStyle:'padding:15px;'},

	items:[

		{region:'west',collapsible:true,width:210,title:'菜单',margins:'5 0 0 0',cmargins:'5 5 0 0',

		bodyStyle:'padding:0px;',animCollapse:true,items:[{xtype:'panel',border:false,id:"pad"}],

		},

		{region:'center',id:'main_panel',title:' ',margins:'5 0 0 0',bodyBorder:false,bodyStyle:'padding:0px;',layout:'fit',items:{html:'<iframe id="mf" name="mf" frameborder="0" style="width:100%;height:100%;" src="about:blank"/>'}}

]};

function init(){

	var oVP	= new Ext.Viewport(cfgVP);

	tree    = new Ext.tree.TreePanel({

        //el:'tab1',

        renderTo:Ext.getCmp("pad").body,

        autoHeight:true,

        rootVisible:false,

        root: new Ext.tree.TreeNode({text:'loading...'})

    });

    sURL = "1.xml"

    proxy = new Ext.data.HttpProxy({url:sURL});

    proxy.on("loadexception", function(oProxy, oOption, oResponse, e){

          if(e){

             var sErr = "错误：" + e.toString() + "\n";

             sErr += "返回：" + oResponse.responseText;

             alert(sErr);

          }

    });

    proxy.load(null, {

        read: function(oResponse){

            var oDoc = oResponse.responseXML;

            Ext.getCmp("pad").body.update("")

			tree    = new Ext.tree.TreePanel({

		        //el:'tab1',

		        renderTo:Ext.getCmp("pad").body,

		        autoHeight:true,

		        rootVisible:false,

		        root: treeNodeFromXml(oDoc.documentElement||oDoc)

		    });

        }

    }, tree.render, tree);



}

Ext.onReady(init);

</script>

</head>

<body>

</body>

</html>

1.xml



<?xml version="1.0" encoding="UTF-8"?>

<root name="ROOT">

  <item name="TEST1NODE1" href="test1.asp"/>

  <item name="TEST1NODE2" href="#">

	  <item name="TEST1NODE21" href="test1.asp"/>

	  <item name="TEST1NODE22" href="test1.asp"/>

  </item>

  <item name="TEST1NODE3" href="test1.asp"/>

</root>