第七讲：ViewPort和TabPanel

最新推荐文章于 2021-01-23 16:44:58 发布
最新推荐文章于 2021-01-23 16:44:58 发布
阅读量246 收藏
点赞数
分类专栏： EXTJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhengN/article/details/84484959
版权

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内容'}

]

});

});

示例二：转换div为选项页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>TestPanel</title>

    <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../Ext/ext-all-debug.js"></script>

    <script type="text/javascript" src="TabPanel4.js"></script>

    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link>

  </head>

  <body>

  <div id="hello">

   <div class='x-hide-display' title='tab标签页1' id="div1">tab标签页1内容</div>

<div class='x-hide-display' title='tab标签页2' id="div2">tab标签页2内容</div>

<div class='x-hide-display' title='tab标签页3' id="div3">tab标签页3内容</div>

<div class='x-hide-display' title='tab标签页4' id="div4">tab标签页4内容</div>

  </div>

  

  <div class='x-hide-display' title='tab标签页5' id="div5">tab标签页5内容</div>

  </body>

</html>

 

Ext.onReady(function(){

var tabPanel = new Ext.TabPanel({

height : 150,

width : 300,

activeTab : 0,//默认激活第一个tab页

animScroll : true,//使用动画滚动效果

enableTabScroll : true,//tab标签超宽时自动出现滚动按钮

applyTo:'hello',

items: [

{title: 'div1内容',contentEl:"div1"},

{title: 'div2内容',contentEl:"div2"},

{title: 'div3内容',contentEl:"div3"},

{title: 'div4内容',contentEl:"div4"},

{title: 'div5内容',contentEl:"div5"}

]

});

});

示例三：自动转换div为选项页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

  <head>

    <title>TestPanel</title>

    <script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>

    <script type="text/javascript" src="../Ext/ext-all-debug.js"></script>

    <script type="text/javascript" src="TabPanel2.js"></script>

    <link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css"></link>

  </head>

  <body>

  <div id="hello">

   <div class='x-tab' title='tab标签页1'>tab标签页1内容</div>

<div class='x-tab' title='tab标签页2'>tab标签页2内容</div>

<div class='x-tab' title='tab标签页3'>tab标签页3内容</div>

<div class='x-tab' title='tab标签页4'>tab标签页4内容</div>

  </div>

  

  <div class='x-tab' title='tab标签页5'>tab标签页5内容</div>

  </body>

</html>

 

Ext.onReady(function(){

var tabPanel = new Ext.TabPanel({

height : 150,

width : 300,

autoTabs : true,//自动扫描页面中的div然后将其转换为标签页

deferredRender : false,//不进行延时渲染

activeTab : 0,//默认激活第一个tab页

animScroll : true,//使用动画滚动效果

enableTabScroll : true,//tab标签超宽时自动出现滚动按钮

applyTo:'hello'

});

});

示例四：动态添加选项页

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:'欢迎您回到 北风网--国内最大最权威的IT技术网站！'}

]

 

})

 

new Ext.Viewport({

title : '北风培训平台系统',

layout:'border',//表格布局

items: [

{

title: '北风培训平台系统',

html : '北风培训平台系统',

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页

}

 

});

odng
关注
专栏目录
EXTJS布局示例（panel，Viewport，TabPanel）
そうふくのスタジオ
03-23 588
面板控件panel应用           new Ext.Panel({               title:'面板头部（header）',               tbar : ['顶端工具栏(top toolbars)'],               bbar : ['底端工具栏(bottom toolbars)'],               height:
第五模块：WEB开发基础-第8章 Jquery开发&BootStrap
qq_36993243的博客
03-15 263
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、jQuery1.知识点介绍2.基础核心使用3.入口函数4.如何处理多个库$冲突问题二、选择器1.基础和层级选择器2.过滤选择器和属性选择器三、dom操作1.dom操作之插入节点2.dom操作之删除节点3.dom操作之克隆节点4.dom操作之替换节点和包裹节点5.属性操作二、
TabPanel Viewport
dwj520的专栏
03-19 808
Ext.onReady(function() { var menuTree = new Ext.tree.TreePanel({ region:'west', title:'功能菜单', width:180, minSize:150, maxSize:200, split:true, autoScroll:true, autoHeight:false, collapsible:true,
6.ViewPort|TabPanel
dengyiyu5280的博客
08-06 88
目录 一、ViewPort 二、TabPanel选项面板 一、ViewPort ViewPort代表整个浏览器显示区域，该对象渲染到页面的body区域，并会随着浏览器显示区域的大小自动改变，一个页面中只能有一个ViewPort实例。 示例一：显示单个Panel Ext.onReady(function(){ new Ext.Viewport({ ...
iview中 Tabs 标签页 指定显示对应的TabPane页面以及高度随内容撑开问题
weixin_43972213的博客
06-19 6165
tab高度
extjs5学习笔记之viewport+tabpanel布局
Reiner的专栏
03-19 2375
整体布局是viewport  点击左边导航按钮天机一个tab  如tab存在 则聚焦该tab否则添加新的tab      下面直接上代码 var view = null; Ext.onReady(function() { var accordion = Ext.create("Ext.panel.Panel", { title : "左侧导航", layout : "
ExtJS ViewPort的使用
HOKING的专栏
12-26 2726
ViewPort代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。 ViewPort静态效果显示 //静态效果显示 Ext.onReady(function(){ Ext.create('Ext.
ExtJS border布局之小案例
zhaohuanzh的博客
01-23 321
前言： layout:‘border’。该布局包含多个字面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是east,south, west, north, center,加入到容器中的字面板需要指定region配置这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置，并且该布局还内建了对面板分割栏的支持。 一．实现界面： 二．实现思路： １－首先确定整体panel为Viewport,layout:"border"(东南西北中　五个区域) ２
精通ExtJS：组件、树与选择模型实战
第二十七章涉及的是`Ext.TabPanel`，也就是选项卡面板。这一章首先提到了`Ext.TabPanel`在实际应用中的背景，接着详细阐述了如何创建和管理选项卡，包括标签的操作和设置，以及如何实现单标签弹出功能。这些知识对于...
Extjs学习总结之28viewport
我的程序员之路
12-02 1117
viewport和布局差不多的，看看图就知道了： viewport.js: Ext.onReady(function(){ Ext.BLANL_IMAGE_URL = "../../resources/image/default/s.gif"; // var north = new Ext.Panel({ // title:"北方", // region:"north", // hei
iview标签页的点击方法_iview tabs标签页 嵌套使用 的问题
weixin_39698007的博客
12-19 1163
项目中用到标签页，然后现在要在标签页内再加个标签页：<template><div><Alert show-icon>当前 View UI(iView)版本为 4.1.2</Alert><Tabs type="card" ref="1"><TabPane label="标签一"><Tabs ref="2"><T...
[iview] ivew标签页点击事件，将点击TabPane标签时对应的参数传给Tabs标签
热门推荐
Java学习
03-05 1万+
ivew的TabPane加@click和@click.native以及@on-click:&amp;quot;&amp;quot; 是无法触发点击事件的 而我们只能在Tabs标签上添加@on-click=“”， 但我们需要把赋值给TabPane标签的id传到后台 然后台再跟据id查询所需要的内容 我们只需要将id赋值给TabPane 标签的name值 然后在Tabs标签中使用value与其对应即可 例： 在kindOfNotic...
运行python文件弹出对话框_pyqt5快速上手基础篇7-弹出对话框
weixin_39619433的博客
12-04 779
前言本节我们学习QDialog的使用，在主页面点击按钮弹出一个新的Dialog。一、基础知识1. dialog简介窗口是GUI设计中不可获取的一部分，方便用户和程序直接交互，简化使用；Qdialog主要包含QInputDialog、QColorDialog、QFontDialog、QFileDialog等。Dialog中常用方法如下：二、实例1. QT Designer设计UI打开designer...
15.extjs tabPanel的用法
weixin_34067102的博客
09-19 777
转自：https://blog.csdn.net/mezhaha/article/details/78878894 本文导读：TabPanel继承于Ext.Panel，Ext.TabPanel就是有选项卡的Panel，可以在选项卡之间切换。它是多个不同内容的容器，任意组件直接使用add()函数便可添加到Ext.TabPanel中。通过activeTab指定激活哪个面板，索引从0开始。下面介绍ext...
自定义View-Tab切换TabBar
博客，是nsacer先森的
04-22 871
效果图：实现原理：1、绘制背景：通过Paint.setStrokeCap(Paint.Cap.ROUND) 、Canvas.drawLine()绘制背景。2、自定义属性，比如：TabBar的背景色、单个tab的选中颜色、字体选中（未选中）颜色。3、根据传入的List&lt;String&gt;或者String[]形式的标题列表计算减去左右预留边距之后的每个Tab的宽度、高度。4、绘制默认情况下的T...
android:viewportWidth和android:viewportHeight的默认值是固定的
最新发布
07-15
你是正确的，android:viewportWidth 和 android:viewportHeight 的默认值是固定的。 在 Android 中，android:viewportWidth 和 android:viewportHeight 属性用于定义矢量图形的视口大小，即在矢量图形中可见的实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值