shiyunlai
2009-05-21 19:02
浏览 289
已采纳

请教yourgame^_^

yourgame你好,
在你共享的“图书管理系统”中,ViewPort采用了border的布局方式(layout:'border'),
其中viewport中的west部分作为“菜单区”,
center部分作为“工作区”,
通过点击左边的某个菜单项,会在工作区内显示对应的操作界面,
同时工作区你采用的是card的布局方式(layout:'card'),
如此,只能够在工作区同一时刻显示一个交易画面(items:[start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book] 中的任意一个),

现在我想将“工作区”修改为tabpanel的布局方式,也就是达到如下效果——点击菜单,在工作区显示对应交易的画面panel,
如下图所以:
[img]E:/未命名2.bmp[/img]

我现在遇到的问题是,无法将原来的交易面板放入点击菜单后弹出的对应tabs中去!就像图中所示一样,弹出来的是空白的tabs:(

对“图书管理系统”中 main.js代码的调整如下(你可以直接查找“chg by”字样的地方):
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
Ext.QuickTips.init();
var start = {
id : 'start-panel',
title : '欢迎使用',
layout : 'fit',
bodyStyle : 'padding:25px',
html : ''
};

Ext.onReady(function() {
setTimeout(function(){

    /* 清除显示加载信息的div标记 */
    Ext.get('loading').remove();

    /* visible 使要素可以被看见
     * hidden 使要素被隐藏
     * inherit 指它将继承母体要素的可视性设置。
     * 值 inherit 为缺省值。这使单元继承父单元的可见性。所以,如果某一段是隐藏的,则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。*/
    Ext.getDom('header').style.visibility = 'visible';

    /* 开始创建界面视图——程序可视区域
     * 一个页面上只允许存在一个viewport */
    var vp = new Ext.Viewport({
        layout : 'border',
        defaults : {
            collapsible : true,
            split : true
        },
        items : [{
            xtype : 'box',
            region : 'north',
            applyTo : 'header',
            height : 30,
            split : false
        }, {
            xtype:'panel',
            title : currentUser,
            id : 'accordion-panel',
            layout : 'border',
            region : 'west',
            baseCls:'x-plain',
            margins : '2 0 5 5',
            width : 200,
            minSize : 200,
            maxSize : 250,
            bodyStyle : 'background-color:#DFE8F6',
            defaults : {
                border : false
            },
            bbar : [{
                text : '开始',
                iconCls : 'icon-plugin',
                menu : new Ext.menu.Menu({
                    items : [{
                        text : '关于系统',
                        iconCls : 'icon-info',
                        handler : function() {
                            new Ext.Window({
                                closeAction : 'close',
                                resizable : false,
                                bodyStyle : 'padding: 7',
                                modal : true,
                                title : '关于本系统',
                                html : '本系统采用目前较为流行的技术实现,<br>前台使用了ExtJs技术,所以实现了跨浏览器<br>' +
                                        '本程序在IE6,IE7,FireFox3均测试通过!<br><br>主要技术: Struts2 + Spring2.5 + iBatis2.3 + ExtJs2.2<br><br>'
                                        + '数&nbsp;&nbsp;据&nbsp;&nbsp;库: Microsoft SQL Server 2000',
                                width : 300,
                                height : 200
                            }).show();
                        }
                    }, {
                        text : '退出系统',
                        iconCls : 'icon-delete',
                        handler : function() {
                            Ext.Msg.confirm('操作提示', '您确定要退出本系统?', function(yorn) {
                                if ('yes' == yorn) {
                                    Ext.Ajax.request({
                                        url : 'logout.action',
                                        success : function() {
                                            location = '/bmsh/index.jsp';
                                        },
                                        failure : function() {
                                            Ext.Msg.show({
                                                title : '错误提示',
                                                msg : '退出系统失败!',
                                                icon : Ext.Msg.ERROR,
                                                buttons : Ext.Msg.OK
                                            });
                                        }
                                    });
                                }
                            });
                        }
                    }]
                })
            }],
            items : [{
                layout : 'accordion',
                region : 'center',
                items : [{
                    title : '导航菜单',
                    iconCls : 'icon-nav',
                    border : false,
                    items : [{
                        xtype : 'treepanel',
                        border : false,
                        rootVisible : false,
                        autoScroll : true,
                        loader : new Ext.tree.TreeLoader({
                            //根据界面勾选manager的值选择菜单项
                            dataUrl : nav == 'manager'
                                    ? 'js/tree-data-manager.json'
                                    : nav =='mine'
                                    ?'js/tree-data-mine.json'
                                    :'js/tree-data-simple.json'
                        }),
                        root : new Ext.tree.AsyncTreeNode(),
                        listeners : {
                            /* chg by megaecho 20090521
                             * 用tabPanel布局方式实现 菜单调出 工作区 交易界面
                             * 'click' : function(n) {
                                try {
                                    //如果点击子叶点,则驱动显示相应的交易界面
                                    //如何判定本次点击的node为原有的node呢? 就是不想重新加载页面。
                                    var sn = this.selModel.selNode || {};// 方法:取原选定的node
                                    if (n.leaf && n.id != sn.id) {
                                        //Ext.Msg.alert("你点击了:"+n.id+"["+n.id.substring(0, n.id.indexOf('-'))+'-panel'+"]");
                                        // 根据选中的菜单拼出panel,并指定载入到ViewPort中id为content-panel的标记
                                        // 也就是将交易界面载入 region=center区域——指定活动items
                                        Ext.getCmp('content-panel').layout.setActiveItem(n.id.substring(0, n.id
                                                .indexOf('-'))
                                                + '-panel');
                                    }
                                } catch (e) {
                                }
                            }*/
                            'click' : function(n){
                                //panel的命名规则:panel+'-panel'
                                var treePanelId = n.id.substring(0, n.id
                                                .indexOf('-'))
                                                + '-panel';
                                //检查TabPanel(content-panel)中是否已经打开了id为treePanelId的panel
                                //无,则新建panel并且id为treePanelId
                                var tabTmp = Ext.getCmp('content-panel').getItem(treePanelId);
                                if(tabTmp==null){
                                    alert("新打开"+treePanelId+"panel");
                                    Ext.getCmp('content-panel').add({
                                        xtype:'panel',
                                        title: n.text,
                                        id:treePanelId,
                                        closable:true  
                                    }).show();
                                }else{
                                    alert("panel"+treePanelId+"已经被打开,跳回已经打开的panel去");
                                    alert(treePanelId+"has been created.....");
                                    Ext.getCmp('content-panel').setActiveTab(tabTmp);
                                }
                            }
                        }
                    }]
                }]
            }]
        }, 
        /*
         * chg by megaecho 20090521
         * 用tabPanel布局方式实现 菜单调出 工作区 交易界面
          {
            id : 'content-panel',
            region : 'center',
            layout : 'card',
            margins : '2 5 5 0',
            activeItem : 0,
            border : false,
            //以下items定义了中间区域包含的交易界面(类),并且按照顺序进行载入 ,默认载入第一个,此处也就是先载入 start
            items : [start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book]
        }*/
        {
            title:'操作区域',
            id:'content-panel',
            region:'center',
            xtype:'tabpanel',
            margins : '0 1 1 0',
            activeItem : 0, 
            border : false,
            autoTabs : false,
            hideCollapseTool :true ,    
            items:[start, p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book]
        }]
    });
}, 250);

});

希望这次表述清楚了,并且能得到你的帮助!谢谢!
[b]问题补充:[/b]
[code="java"]
'click' : function(n){
if( n.leaf ){
var treePanelId = n.id.substring(0, n.id.indexOf('-'))+'-panel';
var tabPanelTmp = Ext.getCmp('content-panel');
var tabTmp = tabPanelTmp.getItem(treePanelId);

    if(tabTmp==null){

        alert("新打开"+treePanelId+"panel");
        /* 使用if..elseif 判断菜单对应的交易界面,并调出——成功*/
        if( n.id == 'book-manage' ){
            tabPanelTmp.add(p_book).show();
        }else if( n.id == 'company-manage'){
            tabPanelTmp.add(p_company).show();
        }else if( n.id == 'dept-manage'){
            tabPanelTmp.add(p_dept).show();
        }else if( n.id == 'user-manage'){
            tabPanelTmp.add(p_user).show();
        }else if( n.id == 'duty-manage'){
            tabPanelTmp.add(p_duty).show();
        }else if( n.id == 'subject-manage'){
            tabPanelTmp.add(p_subject).show();
        }else if( n.id == 'category-manage'){
            tabPanelTmp.add(p_category).show();
        }

        /* [新问题]:将上面if elseif 代替如下,根据传入的节点n得到对应的'p_XXXX'这样的名字,
         * 以获得对p_XXXX的调用,达到自动使用以后交易的增加.....
         * 但是执行 tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
         * 却不能得到效果
        tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
        */

    }else{
        alert("panel"+treePanelId+"已经被打开,跳回已经打开的panel去");
        Ext.getCmp('content-panel').setActiveTab(tabTmp);
    }
}else{
    //alert("非叶节点");
}

}
[/code]
[b]问题补充:[/b]
谢谢issppt的帮助!
更是感谢yourgame,耐心的指导!

问题暂时解决了! 如你所说,我把p_xxxxx这些加入到新增加的panel对应的items参数中就ok了!
但是为了要根据点击菜单来选择对应的p_XXXX,我的做法相对死板
如下:
[code="java"]
'click' : function(n){
if( n.leaf ){
var treePanelId = n.id.substring(0, n.id.indexOf('-'))+'-panel';
var tabPanelTmp = Ext.getCmp('content-panel');
var tabTmp = tabPanelTmp.getItem(treePanelId);

    if(tabTmp==null){

        alert("新打开"+treePanelId+"panel");
        [b]
        /* 死板:使用if..elseif 判断菜单对应的交易界面,并调出——成功*/
        [/b]
        if( n.id == 'book-manage' ){
            tabPanelTmp.add(p_book).show();
        }else if( n.id == 'company-manage'){
            tabPanelTmp.add(p_company).show();
        }else if( n.id == 'dept-manage'){
            tabPanelTmp.add(p_dept).show();
        }else if( n.id == 'user-manage'){
            tabPanelTmp.add(p_user).show();
        }else if( n.id == 'duty-manage'){
            tabPanelTmp.add(p_duty).show();
        }else if( n.id == 'subject-manage'){
            tabPanelTmp.add(p_subject).show();
        }else if( n.id == 'category-manage'){
            tabPanelTmp.add(p_category).show();
        }
        [b]
        /* [新问题]:将上面if elseif 代替如下,根据传入的节点n得到对应的'p_XXXX'这样的名字,
         * 以获得对p_XXXX的调用,达到自动使用以后交易的增加.....
         * 但是执行 tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
         * 却不能得到效果
        tabPanelTmp.add( 'p_'+n.id.substring(0, n.id.indexOf('-')) ).show();
        */
        [/b]
    }else{
        alert("panel"+treePanelId+"已经被打开,跳回已经打开的panel去");
        Ext.getCmp('content-panel').setActiveTab(tabTmp);
    }
}else{
    //alert("非叶节点");
}

}
[/code]

[b]
现在想请教如何处理[新问题]?
[/b]
我想这个新问题关键还是自己对extjs没有理解所致,
对如下的代码段 的实质 和如何才能 引用未搞清楚!再次求教!
[code="java"]
var p_book = {
title:'图书信息管理',
id : 'book-panel',
border : false,
layout : 'fit',
closable:'true',
items : [book_panel]
}
[/code]

另外我通过网上的资料学习,掌握了向TabPanel中动态增加tabs的方法:
1.iframe方式
2.autoLoad方式
3.扩展Panel
资料连接:http://chenxueyong.iteye.com/blog/353371

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • issppt 2009-05-22 11:58
    已采纳

    大致能知道问题,应该是出在交易画面的panel的表单定义上,如果你把交椅画面的表单内容定义在外部,那么导致的情况是,所有的新生的tabpanel都是用是同一组表单元素,就会出现问题。
    如果希望每点击一个结点,相应的tab中出现相应的交易表单,你应当在click事件中去把相应的交易表单拼接出来。
    你可以试一下,因为没有看到你出错的图例,所以大致感觉是这个问题。

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • zhoujuan520 2009-05-22 11:07

    网上大把的示例呀。老大

    评论
    解决 无用
    打赏 举报
  • zhoujuan520 2009-05-23 10:25

    [code="js"]
    'click': function(n) {
    var treePanelId = n.id.substring(0, n.id.indexOf('-')) + '-panel';
    var tabTmp = Ext.getCmp('content-panel').getItem(treePanelId);
    if (tabTmp == null) {
    alert("新打开" + treePanelId + "panel");
    Ext.getCmp('content-panel').add({
    xtype: 'panel',
    title: n.text,
    id: treePanelId,
    closable: true
    }).show();
    } else {
    alert("panel" + treePanelId + "已经被打开,跳回已经打开的panel去");
    alert(treePanelId + "has been created.....");
    Ext.getCmp('content-panel').setActiveTab(tabTmp);
    }
    }
    [/code]

    我初步看了一下你的代码,你说打开的页面都是空白的,问题就在这个地方
    当你打开新的tab页的时候每次都是下面的代码
    [code="js"]
    {
    xtype: 'panel',
    title: n.text,
    id: treePanelId,
    closable: true
    }
    [/code]
    当然没有内容哦.我想你的意思是想打开其他的 "图书信息管理","部门管理","分公司管理"那些页面的内容.在我之前的代码中,这些页面的对象都是已经创建好了的.只是简单的控制他的显示而已.

    所以你要把 items里面的p_company, p_user, p_dept, p_duty, p_subject, p_category, p_book, p_simple_book这些对象都在Ext.getCmp('content-panel').add()这个方法里面动态来创建.这样才能达到目的

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题