Extjs中面板布局的应用

最新推荐文章于 2023-06-17 22:40:09 发布
最新推荐文章于 2023-06-17 22:40:09 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： ExtJS

目标：

      介绍Panel布局的各种类

      Panel布局类在VS中的介绍

内容：

      Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局

      1，Ext.layout.ContainerLayout 容器布局

      提供容器作为布局的基础逻辑，通常会被扩展而不通过new 关键字直接创建，一般作为默认布局存在  

      2，Ext.layout.FitLayout 自适应布局

      使用layout:'fit' 将使面板子元素自动充满容器，如果有多个子面板也只会第一个会被显示

     

      3，Ext.layout.AccordionLayout 折叠布局  （很常有哦！！！）

       扩展自适应布局，layout:'accordion' 它包含了多个子面板，任何时候都只有一个子面板处于打开状态，每个面板都有展开和收缩的功能

      

      4 ，Ext.layout.CardLayout 卡片式布局  （也很有用的哦！！）

       扩展自适应布局，layout:'card' 它包含了多个子面板，只有一个面板处于显示状态，它用来制作向导或标签页，使用setActiveItem来激火面板

       

      5，Ext.layout.AnchorLayout 锚点布局

       根据容器的大小为其所包含的子面板进行定位的布局 layout:'anchor'  分为：百分比，偏移，参考边 三种方式的定位

      

      6，Ext.layout.AbsoluteLayout 绝对位置布局

       根据面板中配置 x/y 坐标进行定位，layout:'absolute' 坐标值支持使用固定值和百分比两种形式

      

      7，Ext.layout.FormLayout  表单布局

       用来管理表单字段的显示，内制了表单布局，提供了表单提交，读取等表单功能，layout:'form'

      

     8, Ext.layout.ColumnLayout 列布局

      多列风格的布局格式，每一列的宽度都可以通过百分比和数值确定宽度，layout:'column'

     9, Ext.layout.TableLayout 表格布局

      可以指定列数，跨行，跨列，可以创建出复杂的表格布局 layout:'table'

     

    10, Ext.layout.BorderLayout 边框布局

     该布局包含多个面板，是一个面向应用的UI风格的布局，它包含5个部分：east,south,west,north,center,layout:'border' 通过region来配置面板

     

   

     viewport的应用：作为浏览器窗口的整个显示部分，其有着panel的功能，但是一定要注意的是一个页面只有一个viewport

      

    示例分析部分

 

Extjs面板布局介绍
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Ext6.aspx.cs" Inherits="EXT1.Ext6"%>

 <!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 runat="server">
<title>第六课,Extjs中面板布局的应用</title>
<link href="ext-3.2.0/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>
<script src="ext-3.2.0/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-3.2.0/ext-all.js" type="text/javascript"></script>
<script type="text/javascript">
function Read1() {
var MyPanel=new Ext.Panel({
title:'自适应布局',
width:250,
height:200,
x:300,
y:50,
floating:true,
renderTo:id1,
frame:true,
layout:'fit',
items:[
{
title:"面板一",
html:"面板一内容"
},
{
title:'面板二',
html:'面板二内容'
}
]
});
}
function Read2() {
var Mypanel=new Ext.Panel({
layout:'accordion',
title:'折叠布局',
renderTo:id1,
width:250,
height:300,
x:300,
y:50,
floating:true,
frame:true,
collapsible:true,
titleCollapse:true,
layoutConfig:{
activeOnTop:false,
fill:true,
hideCollapseTool:false,
titleCollapse:true,
animate:true
},
items:[
{
title:"面板一",
html:"面板一内容"
},
{
title:'面板二',
html:'面板二内容'
},
{
title:'面板3',
html:'面板3内容'
},
{
title:'面板4',
html:'面板4内容'
},
{
title:'面板5',
html:'面板5内容'
}

]
});
}
function Read3() {
var Mypanel=new Ext.Panel({
layout:'card',
title:'卡片布局',
renderTo:id1,
width:250,
height:300,
x:300,
y:50,
floating:true,
frame:true,
collapsible:true,
titleCollapse:true,
activeItem:0,

items:[
{
title:"面板一",
html:"面板一内容",
id:'p1'
},
{
title:'面板二',
html:'面板二内容',
id:'p2'
},
{
title:'面板三',
html:'面板三内容',
id:'p3'
}
],
buttons:[
{
text:'上一页',
handler:change
},
{
text:'下一页',
handler:change
}
]
});
function change(btn) {
var index=Number(Mypanel.layout.activeItem.id.substring(1));
if (btn.text=='上一页') {
index-=1;
if (index<1) {
index=1;
}
}
else
{
index+=1;
if (index>3) {
index=3;
}
}
Mypanel.layout.setActiveItem('p'+index);
}
}
function Read4() {
var Mypanel=new Ext.Panel({
title:'锚点布局',
renderTo:id1,
frame:true,
width:300,
height:200,
x:300,
y:50,
floating:true,
collapsible:true,
titleCollapse:true,
layout:'anchor',
items:[{
anchor:'50%,50%',
draggable:true,
title:'子面板'
},
{
anchor:'-10,-10',
title:'子面板2'
}]
});
}
function Read5() {
var Mypanel=new Ext.Panel({
title:'绝对位置布局',
renderTo:id1,
frame:true,
width:300,
height:200,
x:300,
y:50,
floating:true,
collapsible:true,
titleCollapse:true,
layout:'absolute',
items:[{
x:'10%',
y:10,
width:100,
height:50,
title:'子面板'
},
{
x:90,
y:70,
width:100,
height:50,
title:'子面板2'
}]
});
}
function Read6() {
var MyPanel=new Ext.Panel({
layout:'form',
title:'表单布局',
renderTo:id1,
frame:true,
width:300,
height:200,
x:300,
y:50,
floating:true,
collapsible:true,
titleCollapse:true,
defaultType:'textfield',
labelSeparator:':',
defaults:{msgTarget:'side'},
items:[
{
fieldLabel:'用户名称',
allowBlank:false
},
{
fieldLabel:'用户密码',
allowBlank:false
}
]
});
}
function Rand7() {
Ext.QuickTips.init();
var MyPanel=new Ext.Panel({
title:'列布局',
renderTo:id1,
frame:true,
width:300,
height:200,
x:300,
y:50,
floating:true,
layout:'column',
items:[
{
title:'面板1',
width:100,
height:100
},
{
title:'面板2',
width:100,
height:100
}
]
});
}
function Read8() {
var Mypanel=new Ext.Panel({
title:'表格布局',
renderTo:id1,
frame:true,
width:400,
height:300,
x:350,
y:50,
floating:true,
collapsible:true,
titleCollapse:true,
draggable:{
insertProxy: false,//拖动时不虚线显示原始位置
onDrag : function(e){
var pel =this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);//获取拖动时panel的坐标
var s =this.panel.getEl().shadow;
if (s){
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);//移动到最终位置
}
},
layout:'table',
layoutConfig:{
columns:3
},
items:[
{
title:'面板1',
html:'面板一内容',
rowspan:2,
height:80
},
{
title:'面板2',
html:'面板2内容',
colspan:2

},
{
title:'面板3'
},
{
title:'面板4'
}

]
});
}
function Read9() {
var Mypanel=new Ext.Viewport({
layout:"border",
items:[
{
region:"north",
height:50,
title:"顶部面板"
},
{
region:"south",
height:50,
title:"底部面板"
},
{
region:"center",
title:"中央面板"
},
{
region:"west",
width:100,
title:"左边面板"
},
{
region:"east",
width:100,
title:"右边面板"
}
]
});
}
function Read10() {
var b =new Ext.Button({
id:"show-btn", //定义按钮的ID
text:"弹出按钮", //定义按钮的标题
renderTo:document.body//将弹出按钮渲染到窗体上
});
var button = Ext.get('show-btn');
var win;
button.on('click', function() {
//创建TabPanel
var tabs =new Ext.TabPanel({
region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间
margins: '3 3 3 0',
activeTab: 0, //当前选项卡是第1个(从0开始)
defaults: {
autoScroll: true
},
items:
[
{
title: 'Bogus Tab',
html: "第一个Tab的内容."
},
{
title: 'Another Tab',
html: "我是另一个Tab"
},
{
title: 'Closable Tab',
html: "这是一个可以关闭的Tab",
closable: true//显示关闭按钮
}
]

});

//定义一个Panel
var nav =new Ext.Panel({
title: 'Navigation',
region: 'west', //放在西边，即左侧
split: true, //设置为分割
width: 200,

collapsible: true, //允许伸缩
margins: '3 0 3 3',
cmargins: '3 3 3 3'
});

//如果窗口第一次被打开时才创建
if (!win) {
win =new Ext.Window({
title: 'Layout Window',
closable: true, //显示关闭按钮
width: 600,

height: 350,

border : false,
plain: true,
layout: 'border',
closeAction:'hide',
items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局
});

}

win.show(button);

});
};
Ext.onReady(Read10);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="id1">

</div>
</form>
</body>
</html>

 

pnf
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习ExtJS fit布局使用说明
10-29
### ExtJS Fit布局详解 #### 一、Fit布局概述 在ExtJS中，`Fit`布局是一种非常实用的布局管理器，它可以让一个或多...理解并熟练掌握`Fit`布局的使用方法，对于提高ExtJS应用程序的开发效率和用户体验有着重要意义。
学习ExtJS accordion布局
10-29
以下是一个简单的应用示例，展示了如何在ExtJS中创建一个包含三个可折叠面板的Accordion布局： ```javascript Ext.onReady(function() { var _panel = new Ext.Panel({ title: "人员信息", renderTo: Ext....
【转载】EXTJS布局示例（panel，Viewport，TabPanel）
持续集成
02-05 168
原文网址：http://www.cnblogs.com/johan/archive/2011/04/11/1947982.html 面板控件panel应用         new Ext.Panel({ title:'面板头部（header）',             tbar : ['顶端工具栏(top toolbars)'],             bbar...
Extjs 的panel 介绍
u011123176的专栏
02-21 945
Ext.Panel panel 是extjs中最常用的一款组件,也是开发中用的最多的一款组件.最常见的UI组件都是集成自它.如果没有panel,extjs可能就没有那么盛名了           面板(panel)是Extjs控件的基础,很高级控件都是在面板的基础上扩展的,还有其它大多数控件也都有直接或者间接的关系.应用程序的界面一般情况下           是由一个一个的面板通过不同组织
extjs Ext.form.Panel 表单面板学习
最新发布
西京刀客
06-17 1892
⭐️来自很多年前的extjs笔记，只是一个归档，不做更新！⭐️
ExtJs之Panel篇
weixin_33670713的博客
01-02 145
ExtJs之Panel篇 2011-01-02 11:22 by KenshinCui, ... 阅读, ... 评论, 收藏, 编辑 曾有人说：如果Ext没有panel就没有现在Ext的存在。当然不管这句话正确与否至少说明Panel在Ext中还是有一定的分量的，Panel的子类比较多，例如TabPanel、GridPanel、Fo...
ExtJs之Ext.form.field.TimePicker DatePicker组合框
weixin_33845477的博客
03-20 333
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;ExtJs&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;l
学习ExtJS table布局
10-29
### ExtJS Table布局详解 #### 一、Table布局概述 ...通过以上介绍，我们不仅了解了ExtJS中Table布局的基本概念，还掌握了如何通过简单的配置来实现灵活多变的布局效果。这对于构建高效美观的应用界面具有重要的意义。
学习ExtJS border布局
12-11
掌握Border布局对于创建功能丰富的ExtJS应用程序至关重要，尤其是在需要构建多面板、响应式用户界面时。通过熟练运用Border布局，开发者可以更高效地组织和管理UI元素，提供更佳的用户体验。 总结，ExtJS的Border...
ExtJs3.3中文API.CHM_extjs3.3中文文档_
09-30
1. **组件化**：ExtJS基于组件模型，提供了一系列预定义的UI组件，如按钮、表格、面板、表单等。这些组件具有高度可配置性和可复用性，可以快速构建复杂的用户界面。 2. **数据绑定**：ExtJS支持双向数据绑定，使得...
ExtJs中表单formPanel的横向布局
05-30
ExtJs中表单formPanel的横向布局
Extjs 重写Panel添加click事件
10-29
Extjs 重写Panel添加click事件
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 该文件含ext3.2.0压缩版，可直接运行哦！
ExtJS 基础解析之【Ext.Panel】
weixin_33922670的博客
07-25 144
今天我来和大家分享一下最近学习ExtJS的成果，这两天主要是对Panel组件的学习，好的！话不多说！直接进入正题！ Panel组件//html代码<div id="container"></div>//js代码var p=new Ext.Panel({title:'My Panel',//标题collapsible:true,//右上角的收缩按钮，设为false则不显...
Extjs5.0(8)：Panel组件
kopapai
01-27 1954
Panel很简单，以至于我不知道如何开始这篇文章，直接上代码吧。   1、BasicPanel   上一篇文章我们已经在view包中创建了一个panel包，还建了一个BasicPanels.js文件，我们这里直接使用这个BasicPanels.js，在里面添加几个基本的panel. BasicPanels.js： Ext.define('MyApp.view.panel.Basic
ext
WdWheyr的专栏
03-12 413
转自：http://blog.csdn.net/homsky/article/details/5451028面板控件panel应用 new Ext.Panel({ title:'面板头部（header）', tbar : ['顶端工具栏(top toolbars)'], bbar : ['底端工
ExtJS学习之路第五步：认识最常见组件Panel
02-21 108
文档中描述 　　Panel(面板)是一个容器，它具有特定的功能和结构部件，这使它成为面向应用用户界面的完美基石。面板，继承自Ext.container.Container,能够配置布局以及子组件(Child Components)。当向Panel中添加指定的子项(Child Items)或者动态的添加组件时，记得要考虑如何排版Panel中的子元素，这些子元素是否需要Ext内建Layou...
Extjs 中的GridPanel学习例子三(拖放)
12-10 122
/** * 第一个表格拖放例子 */ Ext.onReady(function(){ var cm = new Ext.grid.ColumnModel([ {header:'编号',dataIndex:'id'}, {header:'名称',dataIndex:'name'}, {header:'描述',dataIndex:'descn'} ]...
ExtJS面板与布局详解：打造灵活用户界面
面板在ExtJS中被比喻为画布，允许开发者在其中灵活布置各种组件，并通过多种布局类调整组件布局。理解面板是掌握ExtJS页面设计的核心，因为它是构建用户界面的基础。 首先，Ext.Panel是ExtJS中的基础容器组件，继承...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值