面板panel与布局layout详解

最新推荐文章于 2024-07-01 17:44:00 发布
最新推荐文章于 2024-07-01 17:44:00 发布
阅读量1.2w 收藏 5
点赞数
文章标签： layout function autoload html button 工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshuaipeng/article/details/7237519
版权

一、面板

       1.类结构

              Ext.Base

                     Ext.AbstractComponent

                            Ext.Component

                                   Ext.container.AbstractContainer

                                          Ext.container.Container

                                                 Ext.panel.AbstractPanel

                                                        Ext.panel.Panel   是以前版本  现在：Ext.Panel类

       2.常见的子类

              Ext.window.Window  --控制窗口

              Ext.form.Panel   --控制form

              Ext.panel.Table   --控制grid

              Ext.tab.Panel   ---控制工具条

              Ext.menu.Menu   ---控制菜单

              Ext.tip.Tip

              Ext.container.ButtonGroup

       3.组成面板的组件

              底部工具栏、顶部工具栏、面板头部、面板底部、面板体

       4.代码实现：

Ext.onReady(function(){

       Ext.QuickTips.init();

       Ext.create("Ext.panel.Panel",{

              title:"面板的头部[Ext.panel.Header]",

              width:500,

              bodyPadding:10,//面板内容的内边距

              height:400,

              hideCollapseTool:false,//默认是收起还是不收起

              collapsible:true,//启用收起的按钮

              //animCollapse:false,//是否启动动画   

              frame:true,//渲染面板

              //autoLoad:"",//只要不是null就自动加载内容 html文件的地址

              html:"<p>面板体</p>",//和上面的autoLoad冲突，autoLoad优先级要高

              autoScroll:true,//自动滚动条

              closable:true,//运行客户关闭

              closeAction:"destroy",//设置关闭动作是销毁还是隐藏   destroy hide

              bodyStyle:{

                     background:"#ffc"

              },

              renderTo:"demo",

              tbar:[

                     {xtype:"button",text:"顶部工具栏"}

              ],

              bbar:[

                     {xtype:"button",text:"底部工具栏"}

              ],

              dockedItems:[{

                     xtype:"toolbar",

                     dock:"bottom",//放置位置

                     ui:"footer",//按钮位置

                     items:[

                            {xtype:"component",flex:1},

                            {xytpe:"button",text:"面板底部",

                                   handler:function(b){

                                          b.up("panel").removeAll();//自动销毁子面板

                                   }

                            }

                     ]

              }],

              tools:[{

                     type:"refresh",

                     qtip:"刷新"

              },{

                     type:"help",

                     qtip:"帮助"

              },{

                     type:"next",

                     handler:function(event,toolEl,panel){

                            panel.up("panel").insert(0,{//追加一个子panel

                                   xtype:"panel",

                                   width:100,

                                   height:100,

                                   bodyStyle:{

                                          background:"red"

                                   }

                            })

                     }

              }    

              ]     

       })

});


二、布局

       1.Auto自动布局[Ext.layout.container.Auto]

       介绍：组件没有指定任何布局方式，Auto布局就是默认的布局方式，它采用原始的HTML流式排版的布局方式

       Ext.onReady(function(){

       Ext.QuickTips.init();

       Ext.create("Ext.Panel",{

              width:500,

              height:480,

              title:"auto布局的面板",

              layout:"auto",

              renderTo:"demo",

              items:[{

                     xtype:"panel",

                     title:"第一个面板",

                     width:"75%",//占总体的百分比

                     height:90

              },{

                     xtype:"panel",

                     title:"第二个面板",

                     width:"75%",

                     height:90

              },{

                     xtype:"panel",

                     title:"第三个面板",

                     width:"90%",

                     height:90

              }]   

       })

       })


       2.Fit自适应布局[Ext.layout.container.Fit]

       介绍：它是它的(第一个也是唯一个)资源元素填满自身的body

       Ext.onReady(function(){

       Ext.QuickTips.init();

       Ext.create("Ext.Panel",{

              width:500,

              height:280,

              title:"fit布局的面板",

              layout:"fit",

              renderTo:"demo",

              items:[{

                     xtype:"panel",

                     title:"第一个面板",

                     width:"75%",//占总体的百分比

                     height:90

              },{

                     xtype:"panel",

                     title:"第二个面板",

                     width:"75%",

                     height:90

              }]   

       })

       })


       3.Accordion折叠(手风琴)布局  [Ext.layout.container.Accordion]

       介绍：它是初始化多个版面，当一个版面处于打开状态下，其他办法就会处于收起状态

       Ext.onReady(function(){

       Ext.QuickTips.init();

       Ext.create("Ext.Panel",{

              width:500,

              height:280,

              title:"accordion布局的面板",

              layout:"accordion",

              renderTo:"demo",

              items:[{

                     xtype:"panel",

                     title:"第一个面板",

                     width:"75%",//占总体的百分比

                     height:90

              },{

                     xtype:"panel",

                     title:"第二个面板",

                     width:"75%",

                     height:90

              },{

                     xtype:"panel",

                     title:"第三个面板",

                     width:"90%",

                     height:90

              }]   

       })

       })


       4.Card卡片布局[Ext.layout.container.Card]

       介绍：和折叠布局不同之处在于它是自定义按钮来切换      

       Ext.onReady(function(){

       Ext.QuickTips.init();

       varnavigate=function(panel,direction,btn){

              varlayout=panel.getLayout();

              layout[direction]();//指定动态的方法  根据传入的参数来充当方法名

              //card的关键函数next()Ext.Component.prev():Ext.Component

              //getNext()Ext.Component.next() : Ext.Component

              Ext.getCmp("move-prev").setDisabled(!layout.getPrev());

              Ext.getCmp("move-next").setDisabled(!layout.getNext());

       }

       Ext.create("Ext.Panel",{

              width:500,

              height:280,

              layout:"card",//设置布局

              activeItem:0,//默认展示的子节点索引

              index:1,//自定义索引

              renderTo:"demo",

              items:[{

                     id:"card-0",

                     xtype:"panel",

                     title:"第一个面板",

                     html:"第一个面板"

              },{

                     id:"card-1",

                     xtype:"panel",

                     title:"第二个面板",

                     html:"第二个面板"

              },{

                     id:"card-2",

                     xtype:"panel",

                     title:"第三个面板",

                     html:"第三个面板"

              }],

              titleInfo:"card布局实例",

              listeners:{

                     render:function(){//面板初始化调用

                            varpanel=this;

                            panel.setTitle(panel.titleInfo+"("+(this.activeItem+1)+"/"+panel.items.length+")");

                     }

              },

              bbar:[{

                     id:"move-prev",

                     text:"上一页",

                     handler:function(btn){

                            varpanel=btn.up("panel");

                            panel.index=panel.index-1;

                            panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");

                            navigate(panel,"prev");

                     },

                     disabled:true

              },

              "->"//标识，将下一页这个按钮放到最右部

              ,{

                     id:"move-next",

                     text:"下一页",

                     handler:function(btn){

                            varpanel=btn.up("panel");

                            panel.index=panel.index+1;

                            panel.setTitle(panel.titleInfo+"("+panel.index+"/"+panel.items.length+")");

                            navigate(panel,"next");

                     }

              }]

       })

       })


张帅鹏
关注
【Unity-UGUI控件全面解析】| Layout自动布局组件详解
努力前行，总会成为自己心中的那道光
06-06 2万+
UGUI中有个自动布局组件Auto Layout，主要包含下面几个模块（点击可进入官方文档下查看描述）： 自动布局 布局元素 (Layout Element) 水平布局组 (Horizontal Layout Group) 垂直布局组 (Vertical Layout Group) 网格布局组 (Grid Layout Group) 内容大小适配器 (Content Size Fitter) 自动布局系统 基于布局元素和布局控制器的概念。一个布局元素是具有矩形变换以及其他可选组件的游戏对象。布局元素对自身
Extjs4-----布局 layout 详解1-accordion(折叠)
islittletan的专栏
04-22 2183
Extjs4-----布局 layout 详解1-accordion(折叠)
panel-layout:Panel Layout是Android的UI库，可让您显示一个浮动的，可调整大小的面板，该面板也可以捕捉到边缘
03-19
面板布局 Panel Layout是Android的UI库，可让您显示一个浮动且可调整大小的面板，该面板也可以捕捉到边缘。 面板布局利用来将面板与其余内容进行布局。 该库的灵感来自于良好的iOS UI框架： 导入面板布局 dependencies { implementation( " com.wayfair.panellayout:panellayout:<latest> " ) } 注意： Panel Layout当前处于Alpha状态，其提供的公共API可能会发生重大变化。 面板布局API 定义面板布局是否可见 var panelVisible : Boolean 将“面板布局”置于预定义的“面板位置”之一中的命令。可能的面板位置是： LEFT_EDGE ， RIGHT_EDGE ， TOP_EDGE ， BOTTOM_EDGE ， NO_EDGE 。 f
Panel的layout属性
weixin_30509393的博客
09-08 186
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form, table. 一共9种。 absolute 顾名思义，在容器内部，根据指定的坐标定位显示 accordion Ext.OnReady(function(){ var panel...
HarmonyOS学习(六)——UI（四）布局
最新发布
qi85481455的博客
07-01 386
SideBarContainer是提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。Tabs是通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图TabContent。scroll是可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸，内容可以滚动。Stack是堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个字组件。Swiper是滑动块视图容器，提供子组件滑动轮播显示的能力。Navigator是路由器组件，提供路由跳转能力。
SlidingPanelLayout
11-06
简单的 SlidingPanelLayout demo
Java 各种Layout和Panel自由组合思考题实例。UI三种常见的布局方式.FlowLayout,BorderLayout,GridLayout.教程
半亩方糖
04-17 1658
思考题：利用上面的三种Layout和Panel知识写一个如下类似的Frame，Layout可以自由组合(答案不唯一) 写代码之前切记直接动手写代码,先构思，构思，构思，一般代码只用20%的时间，80%用来思考构思。 一、构思步骤. 1. 设置GridLayout(2,1);创建一个2行1列的网格,上面个的部分添加一个名为north的Panel，下面的部分添加一个名为south的Panel 2....
WPF下的布局(Layout、Panel)小记
编程开发资料库
01-20 553
看了一周多了C#和.NET了，还没有搞清楚 visual C# 中WPF的界面设计器的布局怎么弄，以及常用的控件分别有哪些。 接下来看看WPF中的控件与布局。 继承关系？ 没有图片，用表格凑活一下 继承关系 该类继承的Interface | | V | | V ContentControl ...
EXT 布局 Layout 资料
10-30
### EXT 布局 Layout 资料详解 #### 6.1 布局概述 在 Ext JS 中，布局（Layout）是一个重要的概念，它指的是容器组件内子元素的排列方式。Ext JS 的所有容器组件都支持布局操作，并且每个容器都有一个对应的布局...
布局layout
06-22
### 布局layout知识点详解 #### 一、EasyUI简介 EasyUI是一个基于jQuery的用户界面插件集合。它提供了各种UI组件，使得开发者能够快速地构建出丰富的Web应用程序界面。EasyUI不仅简化了前端开发流程，还提高了开发...
界面控件DotNetBar for WinForms使用教程：LayoutControl布局与通用代码设置（三）
qq_42444778的博客
01-11 1952
DotNetBar for WinForms是一个拥有89个组件的用户界面控件套包，用户可以使用Visual Studio 2005-2015轻松地创建专业的用户界面。十多年来DotNetBar帮助开发人员轻松地创建易用的专业Windows Forms (WinForms) 用户界面。 点击下载DotNetBar for WinForms最新试用版 接上文: LayoutControl相关概述（一） LayoutControl详解（二） 布局规则 LayoutControl使用的第一个布局规则是
Scala界面Panel、Layout初探
52Pig的专栏
07-28 986
示例代码： package com.dt.scala.gui import scala.swing.SimpleSwingApplication import scala.swing.MainFrame import scala.swing.Button import scala.swing.Label import scala.swing.Orientation import scala.s
java布局可以混合用吗_[JAVA]JPanel三种布局BorderLayout GridLayout FlowLayout 混合使用
weixin_39946500的博客
02-24 547
代码说明：将JPanel三种布局BorderLayout GridLayout FlowLayout 混合使用，写了一个用户登录界面。没有实现按钮的功能化，仅仅只是界面。在GridLayout布局的面板再次放置小面板，小面板采用FlowLayout布局，从而调整小面板内的文本框(JTextField JPasswordField)控件，使得文本框控件的宽度不会被撑开，更美观。布局示意图如下：控件分...
easyui系列之布局Layout,Panel,Accordion,Tabs（1）
weixin_30892763的博客
03-26 399
1、Layout布局 通过 $.fn.layout.defaults 重写默认的 defaults。 布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。中间的区域面板是必需的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也可以通过点击折叠触发器来折叠面板。布局（layout）可以嵌套，因此用户可...
ext panel 简单布局
城之残垣的专栏
09-06 479
var panel = Ext.create('Ext.Panel', {     id:'main-panel',         baseCls:'x-plain',         renderTo: Ext.getBody(),         layout: {
Ext的layout布局
博客统计
06-26 272
Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎（layout engine），区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。   布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第...
Ext 布局（layout）
luck_wy的专栏
10-16 975
1、card 1 var navigate = function (panel, direction) { 2 var layout = panel.getLayout(); 3 layout[direction](); 4 Ext.getCmp('mov
winform入门篇 第六章 -- 布局器
weixin_43847546的博客
04-11 1974
SimpleLayoutPanel:自定义一个Panel，并自己实现-个LayoutEngine。观察代码。。自定义布局器的 使用步骤:1 工具I选项，Windows窗体设计器|常规自动填充工具箱:设为True2 添加自定义Panel或Control的类3生成解决方案 F74重新打开Form1.cs，在工具箱界面可以看到自己的控件直接拖动过来就可以使用将其他控件拖入到该布局器中，发现他按照一定的规则自动布局了可以给自定义panel添加一些间距属性运行。
extjs panel layoutconfig属性
evilcry2012的专栏
10-28 944
extjs panel layoutconfig属性 分类： extjs2012-06-23 23:27 3790人阅读 评论(0) 收藏 举报 extjslayouthtmlobjectgo 目录(?)[+] layoutConfig: Object 这是一个包含指定布局详细属性的对象 (与layout 配置值结合使用)。 对于... 这是一个
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值