Ext采用viewport布局，怎么设置树的超链接？
下面这段代码用了viewport布局，在west那块我加了个树形菜单，现在要实现单击树的节点，在center块中显示不同页面，可是用了hrefTarget好像不管用，都是新打开一个窗口，大家帮我看看哪里有问题...
<script type="text/javascript">
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:'root',
text:'点餐系统'});
var node1=new Ext.tree.TreeNode({text:'桌台信息维护',href:'table_list.html',hrefTarget:'mainFrame'});
var node2=new Ext.tree.TreeNode({text:'菜品信息维护',href:'vegetable_list.html',hrefTarget:'mainFrame'});
root.appendChild(node1);
root.appendChild(node2);
var tree=new Ext.tree.TreePanel({
animate:true,
rootVisible:true,
autoScroll:true,
autoHeight:true,
useArrows:true,
root:root,
autoHeight:true
});
new Ext.Viewport({
layout: 'border',
items: [
{
frame:true,
title:"点餐系统",
region:"west",
items:tree,
width:200,
collapsible:true,
split:true
},{
region:'center',
id:'mainFrame',
autoScroll:true,
collapsible: true
},{
region: 'north',
frame:true,
contentEl:headdiv,
split: true,
height: 100,
minHeight: 100
}]
});
});
</script>
[解决办法]
我也遇到这个问题
[解决办法]
监听树节点的click事件
[解决办法]
一个成功的例子
Ext.Loader.setConfig({ enabled: true }); Ext.Loader.setPath('Ext.ux', '../../Scripts/ext-4.0/ext-4.0/examples/ux'); Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox', 'Ext.form.Panel' ]); Ext.onReady(function() { /** * 上,panel.Panel */ this.topPanel = Ext.create('Ext.panel.Panel', { region: 'north', id: 'north', html: '<div style="background-image:url(../../Content/images/logo3.gif); background-repeat:no-repeat;" id="north" class="clearfix"><div class="title" ></div><div class="welcome">欢迎你!<span class="user"><%= ViewData["CurrentUser"]%></span><a href="/User/Logoff" class="logoff">注销</a></div></div>', height: 45, margins: '0 0 0 0', border: false }); /** * 左,panel.Panel */ this.leftPanel = Ext.create('Ext.panel.Panel', { region: 'west', title: '导航栏', layout: 'accordion', collapseMode: 'mini', collapsible: true, width: 180, minWidth: 100, maxWidth: 300, split: true, autoScroll: true }); /** * 右,tab.Panel */ this.rightPanel = Ext.create('Ext.tab.Panel', { region: 'center', id: 'tab', height: '100%', activeTab: 0, items: [ { title: '首页', bodyPadding: 10 } ] }); this.southPanel = Ext.create('Ext.panel.Panel', { region: 'south', html: '<div id="south"> Powered by ASP.Net MVC 2.0 + ExtJS 4.0.0 <a target="_blank" href="http://www.minstars.cn" style="text-decoration: none; color: #FFF;"></a></div>', split: true, margins: '0 0 0 0', border: false }); /** * 组建树 */ var buildTree = function(json) { return Ext.create('Ext.tree.Panel', { rootVisible: false, ///////////////// border: false, store: Ext.create('Ext.data.TreeStore', { root: { expanded: true, children: json.children } }), listeners: { 'itemclick': function(view, record, item, index, e) { var id = record.get('id'); var text = record.get('text'); var leaf = record.get('leaf'); var tabPanel = Ext.getCmp('tab'); var tab = tabPanel.getComponent(id + ""); if (leaf) { if (!tab) { tabPanel.add({ id: id, title: text, closable: true, layout: 'fit', items: [{ html: '<iframe id="itemPanel" name="itemPanel" frameborder=0 src="' + record.raw.url + '" style="width:100%;height:100%;" scrolling=no></iframe>'}] }).show(); } tabPanel.setActiveTab(tab); //设置显示当前面板 } }, scope: this } }); }; /** * 加载菜单树 */ Ext.Ajax.request({ url: '<%= Url.Action("TreeMenu", "Home")%>', success: function(response) { var json = Ext.JSON.decode("{data:" + response.responseText + "}"); Ext.each(json.data, function(el) { var panel = Ext.create( 'Ext.panel.Panel', { id: el.id, title: el.text, layout: 'fit' }); panel.add(buildTree(el)); leftPanel.add(panel); }); }, failure: function(request) { Ext.MessageBox.show({ title: '操作提示', msg: "连接服务器失败", buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); }, method: 'post' }); /** * Viewport */ Ext.create('Ext.container.Viewport', { layout: 'border', renderTo: Ext.getBody(), items: [this.topPanel, this.leftPanel, this.rightPanel, this.southPanel] }); });
[解决办法]
var node1=new Ext.tree.TreeNode({text:'桌台信息维护',href:'table_list.html',hrefTarget:'mainFrame'});
var node2=new Ext.tree.TreeNode({text:'菜品信息维护',href:'vegetable_list.html',hrefTarget:'mainFrame'});
把href改成url就好了。。。