下面这段代码用了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> 

解决方案 »

  1.   

    一个成功的例子 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]
                    });            });
      

  2.   

    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就好了