zoukankan      html  css  js  c++  java
  • extjs tabpanel动态添加panel

    index =  Ext.extend(Ext.Viewport,{
            center : new Ext.TabPanel({
    		            id : 'mainview',
    		            region : 'center',
    		            activeTab : 0,
                        width : 600,
    		            height : 250,
                        minTabWidth: 115,
                        tabWidth:135,
                        enableTabScroll:true,
    		            split : true,
                        layoutOnTabChange:true,
                        tabPosition : 'top',
                        resizeTabs:true,
                        defaults : {autoScroll:true},
    		            plugins : new Ext.ux.TabCloseMenu(),
    		            items :{
    		                id : 'start-panel',
    					    title : 'MainView',
                            iconCls : 'tabs',
    					    layout : 'fit',
    					    bodyStyle : 'padding:25px',
    					    html : '<img src="../images/bg.jpg"/>'
    		            }
            }),
            constructor : function(){
                //var clock = new Ext.Toolbar.TextItem('');
                index.superclass.constructor.call(this,{
                    layout : 'border',
                    items : [{
                       region : 'north',
                       xtype : 'panel',
                       height : 25,
                       layout : 'column',
                       border : false,
                       items : [{
                            columnWidth : 1,
                            border : false,
                            layout : 'fit',
                            items : [{
                                xtype : 'panel',
                                id : 'logo-header',
                                border : false,
                                tbar : [
                                    {
                                        text : currentUser
                                    },{
                                        text : new Date().format('Y年m月d日')
                                    },'->',{
                                        text:'注销'
                                        ,iconCls:'logout'
                                        ,handler:function(){
                                            Ext.Msg.show({
                                               title:'注销系统',
                                               msg: '提示:注销系统前请注意保存数据,确定要注销吗?',
                                               buttons: Ext.Msg.YESNO,
                                               fn: function(btn){
                                                    if(btn=='yes'){
                                                        Ext.Ajax.request({
                                                           url : 'logout.action',
    			                                           success : function() {
    			                                                location = '../main/index.jsp';
    			                                            },
    			                                            failure : function() {
    			                                                Ext.Msg.show({
    			                                                    title : '错误提示',
    			                                                    msg : '退出系统失败!',
    			                                                    icon : Ext.Msg.ERROR,
    			                                                    buttons : Ext.Msg.OK
    			                                                });
    			                                            }
                                                        });
                                                    }
                                               }
                                            });
                                        }
                                    }
                                ]
                            }]
                       }]
                    },{
                        region : 'west',
                        xtype : 'panel',
                        layout : 'accordion',
                        title : '计划排产管理系统',
                        split : true,
                        minSize : 200,
                        maxSize : 250,
                        //margins : '2 0 5 5',
                        collapsible : true,
                        collapseMode:'mini',
                        width : 200,
                        layoutConfig : {
                            animate : true
                        },
                        listeners : {
                            'expand' :{
                              fn : this.onExpandPanel,
                              scope : this
                            },
                            'collapse' :{
                                fn : this.onCollapsePanel,
                                scope : this
                            }
                        },
                        items : [{
                            title : '导航栏',
                            iconCls : 'icon-nav',
                            xtype : 'treepanel',
                            autoScroll : true,
                            border : false,
                            id : 'treepanel',
                            tools : [{
                                   id : 'refresh',
                                   handler : this.onRefreshTreeNodes,
                                   scope : this
                            },{
    	                        id:'expanded',
    	                        tooltip:'展开',
    	                        handler:function(){
    	                            Ext.getCmp('treepanel').expandAll();
    	                        }
                        }],
                            loader : new Ext.tree.JsonPluginTreeLoader({
                                        url : 'findTree.action'
                                    }),
                            root : new Ext.tree.AsyncTreeNode({text : '菜单', expanded:true}),
                            listeners : {
                                'click' : {
                                    fn :this.onTreeNodeClick,
                                    scope : this
                                },
                                'afterrender':{
                                    fn : this.onExpandAll,
                                    scope : this
                                }
                            }
                        }]
                    },this.center]
                })
            },
            addTab : function(name,id,css,link){
                var tabId = 'tab_'+id;
                var tabTitle = name;
                var tabLink = link;
                var centerPanel = Ext.getCmp('mainview');
                var tab =centerPanel.getComponent(tabId);
                var subMainId = 'tab_'+id+'_main';
                if(!tab){
                    var newTab = centerPanel.add(new Ext.Panel({
                        id : tabId,
                        title : tabTitle,
                        iconCls : 'tabs',
                        border : false,
                        closable : true,
                        layout : 'fit',
                        listeners : {
                            activate : this.onActiveTabSize,
                            scope : this
                        }
                    }));
                    centerPanel.setActiveTab(newTab);
                    newTab.load({
                        url : tabLink,
                        method : 'post',
                        params : {
                            subMainId : subMainId
                        },
                        scope : this,
                        discardUrl : true,
                        nocache : true, // 不缓存
                        text : '加载中,请稍候...',
                        timeout : 3000,
                        scripts : true
                    });
                }else{
                    centerPanel.setActiveTab(tab);
                }
            },
            onActiveTabSize : function(){
                var w = Ext.getCmp('mainview').getActiveTab().getInnerWidth();
                var h = Ext.getCmp('mainview').getActiveTab().getInnerHeight();
                var Atab = Ext.getCmp('mainview').getActiveTab().id;
                var submain = Ext.getCmp(Atab+'_main');
                if(submain){
                    submain.setWidth(w);
                    submain.setHeight(h);
                }
            },
            onRefreshTreeNodes : function(){
                Ext.getCmp('treepanel').root.reload(); 
            },
            onTreeNodeClick : function(_node,_e){
                if(_node.isLeaf()){
                    var _nodeText = _node.attributes.text;
                    var _nodeLink = _node.attributes.url;
                    var _nodeId = _node.attributes.id;
                    this.addTab(_nodeText,_nodeId,'_css',_nodeLink)
                }
            },
            onExpandPanel : function(_nowCmp){
                this.onActiveTabSize();
            },
            onCollapsePanel : function(_nowCmp){
                this.onActiveTabSize();
            },
            onExpandAll : function(){
                Ext.getCmp('treepanel').expandAll();
            }
    })
     
  • 相关阅读:
    C++基础-函数的覆盖和函数重载
    C++基础-public(公有属性),protected(保护属性),private(私有属性)
    C++基础-父类和子类的构造和析构的顺序
    C++基础-类的(有参数)继承
    C++基础-类的(无参数)继承
    C程序之包含头文件
    时间复杂度详细分析
    "分辨率"到底是个什么概念?它和DPI之间是什么关系?
    每天一个Qt类之QWidget
    line1: 1: Syntax error: word unexpected (expecting ")")
  • 原文地址:https://www.cnblogs.com/qq1988627/p/6606943.html
Copyright © 2011-2022 走看看