6.ViewPort|TabPanel

目录

一、ViewPort

二、TabPanel选项面板

 

一、ViewPort

ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。

示例一：显示单个Panel

   Ext.onReady(function(){
      new Ext.Viewport({
          title : 'ViewPort',
          layout:"fit",
          items: [
             {
                 title:"panel"
             }
          ]
      });
   });

 

示例二：使用Accordion布局。

Ext.onReady(function(){
      new Ext.Viewport({
          title : 'ViewPort',
          layout:'accordion',
          items: [
             {
                 title:"panel1",
                 html:"panel1文本内容"
             },
             {
                 title:"panel2",
                 html:"panel2文本内容"
             }
          ]
      });
   });

 

示例三：使用border布局。

Ext.onReady(function(){
      new Ext.Viewport({
          title : 'ViewPort',
          layout:'border',//表格布局
          items: [
          {
             title: 'north Panel',
             html : '上边',
             region: 'north',//指定子面板所在区域为north
             height: 100
          },{
             title: 'West Panel',
             html : '左边',
             region:'west',//指定子面板所在区域为west
             width: 150
          },{
             title: 'Main Content',
             html : '中间',
             region:'center'//指定子面板所在区域为center
          }]
      });
   });

 

 

二、TabPanel选项面板

示例一：

Ext.onReady(function(){
      var tabPanel = new Ext.TabPanel({
          height : 150,
          width : 300,
          activeTab : 0,//默认激活第一个tab页
          animScroll : true,//使用动画滚动效果
          enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
          applyTo:'hello',
          items: [
             {title: 'tab标签页1',html : 'tab标签页1内容'},
             {title: 'tab标签页2',html : 'tab标签页2内容'},
             {title: 'tab标签页3',html : 'tab标签页3内容'},
             {title: 'tab标签页4',html : 'tab标签页4内容'},
             {title: 'tab标签页5',html : 'tab标签页5内容'}
          ]
      });
});

 示例二：动态添加选项页

    Ext.onReady(function(){
      var tabPanel = new Ext.TabPanel({
          height : 350,
          width : 400,
          activeTab : 0,//默认激活第一个tab页
          animScroll : true,//使用动画滚动效果
          enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
          applyTo:'hello',
          items: [
             {title: 'tab标签页1',html : 'tab标签页1内容'},
             {title: 'tab标签页2',html : 'tab标签页2内容'},
             {title: 'tab标签页3',html : 'tab标签页3内容'},
             {title: 'tab标签页4',html : 'tab标签页4内容'},
             {title: 'tab标签页5',html : 'tab标签页5内容'}
          ],
          buttons : [
             {
                 text : '添加标签页',
                 handler : addTabPage
             }
          ]
      });
      function addTabPage(){
          var index = tabPanel.items.length + 1;
          var tabPage = tabPanel.add({//动态添加tab页
             title: 'tab标签页'+index,
             html : 'tab标签页'+index+'内容',
             closable : true//允许关闭
          })
          tabPanel.setActiveTab(tabPage);//设置当前tab页
      }
    });

 

 

示例三：为标签页添加右键菜单

    Ext.onReady(function(){
      var tabPanel = new Ext.TabPanel({
          height : 350,
          width : 400,
          activeTab : 0,//默认激活第一个tab页
          animScroll : true,//使用动画滚动效果
          enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
          applyTo:'hello',
          items: [
             {title: 'tab标签页1',html : 'tab标签页1内容'},
             {title: 'tab标签页2',html : 'tab标签页2内容'},
             {title: 'tab标签页3',html : 'tab标签页3内容'},
             {title: 'tab标签页4',html : 'tab标签页4内容'},
             {title: 'tab标签页5',html : 'tab标签页5内容'}
          ],
          buttons : [
             {
                 text : '添加标签页',
                 handler : addTabPage
             }
          ],listeners:{
             "contextmenu":function(tabPanel,myitem,e){
                 var menu = new Ext.menu.Menu([
                    {text:"关闭当前页",handler:function(){tabPanel.remove(myitem)}},
                    {text:"关闭其他所有页面",handler:function() {
                           tabPanel.items.each(function(item) {
                               if(item != myitem) {
                                  tabPanel.remove(item);
                               }
                           })
                        }     
                    },
                    {text:"打开新页面",handler:addTabPage}
                 ]);
                 menu.showAt(e.getPoint());
             }
          }
      });
      function addTabPage(){
          var index = tabPanel.items.length + 1;
          var tabPage = tabPanel.add({//动态添加tab页
             title: 'tab标签页'+index,
             html : 'tab标签页'+index+'内容',
             closable : true//允许关闭
          })
          tabPanel.setActiveTab(tabPage);//设置当前tab页
      }
    });

 

ViewPort和TabPanel的综合例子

Ext.onReady(function(){
   var tabPanel = new Ext.TabPanel({
             title: '主面板',
             region:'center',//指定子面板所在区域为center
             activeTab : 0,//默认激活第一个tab页
             animScroll : true,//使用动画滚动效果
             enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
             items: [
                 {title:'欢迎页',html:'欢迎您'}
             ]
   })
   new Ext.Viewport({
          title : 'XXX系统',
          layout:'border',//表格布局
          items: [
          {
             title: 'XXX系统',
             html : 'XXX系统',
             region: 'north',//指定子面板所在区域为north
             height: 100
          },{
             title: '菜单栏',
             region:'west',//指定子面板所在区域为west
             width: 150,
             tbar:[
                 {text:"操作",menu:[
                    {text:"我的订单",handler:myOrder},
                    {text:"资金管理",handler:moneyManager}
                 ]}
             ]
          },
          tabPanel
          ]
      });
      function myOrder(){
          var tabPage = tabPanel.add({//动态添加tab页
             title: '我的订单',
             html : '我的订单',
             closable : true//允许关闭
          })
          tabPanel.setActiveTab(tabPage);//设置当前tab页
      }
      function moneyManager(){
          var tabPage = tabPanel.add({//动态添加tab页
             title: '资金管理',
             html : '资金管理',
             closable : true//允许关闭
          })
          tabPanel.setActiveTab(tabPage);//设置当前tab页
      }
});