我用ViewPort时间了一个框架 左边是一颗EXT的树 右边也是一个面板 我现在想实现 左边点击树的节点 然后在右边的面板中显示 这样能实现吗？
我的VIEWPORT代码 如下:
new Ext.Viewport(
{
layout:"border",
items:[{
title:"南宁供电局企业门户BI管理",
width:202,
region:"west",
html:' '}//[color=red]这个iframe就是加载树的页面[/color] ,
[color=red]{//下面这个就是我想显示位置的面板 能实现否！[/color] xtype:"panel",
region:"center",
items:
[{
title:"广西项目",
html:' '
}]
}]})})
我的json语句：json +="{id:'"+manage.getId()+"',text:'"+manage.getNodename()+"',leaf:true,href:'showbi.jsp',hrefTarget:'[color=red]这个地方咋写'[/color]},";
[b]问题补充：[/b]
center 我试过了 这样他就会在新的窗口中打开 不会在原来的面板中加载该页面
[b]问题补充：[/b]
我这个用的面板 不是ifarme所以用id是不行的
[b]问题补充：[/b]
我是想在regin:"center"中这个位置打开新的页面 不是单独打开新的页面 能实现吗
[b]问题补充：[/b]
lhx222你的方法我已经试过啦 他还是在新的窗口打开！ 你以前都是这样的吗
[code="javascript"]
Ext.onReady(function(){
var mailHtml = '
树节点如下：
[code="javascript"]
{
id:Ext.id(),
text:'学科教学资源包转校管理',
href:'/jxauth/JXAuth.do?action=changeSchoolIndex',
hrefTarget:'main',
leaf:true
}
[/code]
[quote]hrefTarget:'这个地方咋写'[/quote]
链接的目标frame
比如:hrefTarget:"_blank"//_blank也可为center
事件要写到Ext onclick, iframe 最好取一id
[code="html"]<br> Ext.onReady(function(){<br> // shorthand<br> var Tree = Ext.tree;</p> <pre><code> var tree = new Tree.TreePanel({ region:'west', id:'west-panel', title:'导航', split:true, width: 200, minSize: 175, maxSize: 400, collapsible: true, margins:'65 0 5 5', cmargins:'65 5 5 5', layoutConfig:{ animate:true }, tbar: [{ text: '刷新', handler: function() { var n = MyNS.Eip.navTree.getSelectionModel().getSelectedNode(); n && n.reload(); } }], useArrows: true, preloadChildren :true, animate: true, autoScroll: true, // auto create TreeLoader root: { nodeType: 'async', text: 'Root', draggable: false, iconCls: 'root', expanded: true, id: 4 }, loader: new Ext.tree.TreeLoader({ dataUrl : 'tree_node_children.json', requestMethod: 'GET' }) }); tree.on('click', function(n, e){ var sn = this.selModel.selNode || {}; // selNode is null on initial selection var load_url = n.attributes.load_url; if (load_url) { document.getElementById('ct-iframe').src = load_url; } }); tree.on('beforeload', function(n){ if(n.attributes.children_url) { n.ownerTree.loader.dataUrl = n.attributes.children_url; } else { n.ownerTree.loader.dataUrl = 'tree_node_children.json' } }); Ext.ns('MyNS.Eip'); MyNS.Eip.navTree = tree; Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var viewport = new Ext.Viewport({ layout:'border', items:[{ xtype: 'box', el: 'header-cnt', width: '100%' }, tree, { region:'center', margins:'65 0 0 0', layout:'fit', autoScroll:true, items:[{ bodyStyle:'padding:5px 5px 0 5px;', baseCls:'x-plain', layout:'fit', items:[{ id: 'ct-bd', border: false, html: '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" style="border: 0px none ;" name="content-iframe" id="ct-iframe" ></iframe>' }] }] }] }); </code></pre> <p>});<br>
json格式：
[code="json"][{"cls": "tree-node", "text": "node1", "expanded": true, "children_url": null, "iconCls": "export", "load_url": null, "leaf": null, "id": 15509, "children": [
{"cls": "tree-node", "text": "node2", "expanded": null, "children_url": "tree_node_children.json", "iconCls": "nodes", "load_url": "www.baidu.com", "leaf": null, "id": 15504},
{"cls": "tree-node", "text": "node3", "expanded": null, "children_url": "tree_node_his_children.json", "iconCls": "his-nodes", "load_url": "google.com", "leaf": null, "id": 15505}]
}][/code]
打开节点链接地址默认为blank,可以设置为iframe名称id,则在iframe中打开
给iframe增加个id,
hrefTarget:"bodyframe"
[code="javascript"]
new Ext.Viewport(
{
layout:"border",
items:[{
title:"南宁供电局企业门户BI管理",
width:202,
region:"west",
html:' '} ,
{xtype:"panel",
region:"center",
items:
[{
title:"广西项目",
html:' '
}]
}]})})
[/code]
json +="{id:'"+manage.getId()+"',text:'"+manage.getNodename()+"',leaf:true,href:'showbi.jsp',hrefTarget:'[color=red]centerIfram[/color]e'},";
[code="java"]{
title:"广西项目",
html:' '
}[/code]
注意: hrefTarget是使用这里的iframe的名字而不是面板的名字或者ID