您的位置:首页 > Web前端 > extjs > 正文

ExtJs 中Viewport 的使用

更多 时间:2013-10-6 类别:Web前端 浏览量:9505

ExtJs 中Viewport 的使用

ExtJs 中Viewport 的使用

Viewport 不需要再指定renderTo,而我们也看到Viewport 确实填充了整个浏览器显示区域,并会随着浏览器显示区域大小的改变而改改。

Viewport 主要用于应用程序的主界面,可以通过使用不同的布局来搭建出不同风格的应用程序主界面。

在Viewport 上常用的布局有fit、border 等,当然在需要的时候其它布局也会常用。

 

下面通过一个Viewport的实例了解ExtJs 中Viewport 的使用:

  •  
  • JScript 代码   复制
  • 
    Ext.onReady(function(){
    Ext.QuickTips.init();
         var tree=new   Ext.tree.TreePanel({
        //   el:"tree"
       });
    
        var root=new Ext.tree.TreeNode({text:'项目信息'});
        var node1=new Ext.tree.TreeNode({
            id:'node1',
            text:"项目资料"
    
        });
        var node2=new Ext.tree.TreeNode({
            id:'node2',
            text:'标段信息'
    
        });
        var node3=new Ext.tree.TreeNode({
            id:'node3',
            text:"合同清单"
    
        });
        var node4=new Ext.tree.TreeNode({
            id:'node4',
            text:"形象清单"
          
        });
        root.appendChild(node1);
        root.appendChild(node2);
        root.appendChild(node3);
        root.appendChild(node4);
        tree.setRootNode(root);
    
        tree.on("click",function(node){
            
           /* var text=node.text;
            var mainPanel=Ext.getCmp("main"); //中间主Panel
            var url="";
            if(text=="项目信息") url="1.jsp";
            if(text=="项目资料") url="1.jsp";
            if(text=="标段信息") url="2.jsp";
            if(text=="合同清单") url="3.jsp";
            if(text=="形象清单") url="4.jsp";
         
            mainPanel.load({
                url:url,
                nocache:true,
                text:"正在加载中......",
                timeout:30,
                scripts:true 
            });*/
                var n;
                n = tabPanel.getComponent(node.id);
                if(n) {
                    tabPanel.setActiveTab(n);
                    return;
                }
                n = tabPanel.add( {
                    id : node.id,
                    title : node.text,
                    html : iframe嵌套页面地址,
                    closable : 'true'
                });
                tabPanel.setActiveTab(n);
            
            
        });
     
        var tabPanel = new Ext.TabPanel({
                region:"center",
                   plit:true,
                   border:true,
                   id:"main",
                enableTabScroll : true,
                deferredRender : false,
                activeTab : 0,
                items : [ {
                    title : 'index',
                    autoLoad : 'list.jsp'
                    }]
                });
        
        var accordion = new Ext.Panel({
            title:'系统菜单',
            region:"west",
               collapsible:true,
               width:200,
               layout:"accordion",
               layoutConfig:{
                   titleCollapse:true,
                   animate:true,
                   activeOnTop:false
                    },
        items:[{
                   title:"第一栏",
                   items:[tree]
               },{
                   title:"第二栏"
               },{
                   title:"第三栏"
               }]
        
        });
        
       var viewport=new Ext.Viewport({
               enableTabScroll:true,
               layout:"border",
               items:[
                   accordion,
                  tabPanel
           ]
    
       });
    });
    
    		
  •  效果图为:

    标签:ExtJs 布局