ExtJS4学习笔记(三)---VBox布局的使用

最新推荐文章于 2019-09-09 14:48:24 发布
最新推荐文章于 2019-09-09 14:48:24 发布
阅读量835 收藏
点赞数
分类专栏： ExtJS

要使用VBox布局方式，首先的熟悉下一下几个主要属性：

一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。

    1、left（默认）：排列于容器左侧。

    2、center ：控件在容器水平居中。

    3、stretch：控件横向拉伸至容器大小

    4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。

二、flex:数字类型，指示组件在容器中水平呈现方式，通俗的讲，就是指示组件在容器中的相对宽度。

三、pack : 字符类型，指示组件在容器的位置，有如下几种属性。

    1、start（默认）：组件在容器上边

    2、center：组件在容器中间

    3、end：组件在容器的下边

 

HTML代码：

 

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>VBox---MHZG.NET</title> 
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" /> 
<script type="text/javascript" src="../../bootstrap.js"></script> 
<script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript" src="vbox.js"></script> 
<style type="text/css"> 
        html, body { 
            font: normal 12px verdana; 
            margin: 0; 
            padding: 0; 
            border: 0 none; 
        } 
    </style> 
</head> 

<body> 
</body> 
</html> 

vbox.js：

Ext.onReady(function() { 
 var currentName; 
 var replace = function(config, name) { 
  var btns = Ext.getCmp('btns'); 
  if (name && name != currentName) { 
   currentName = name; 
   btns.remove(0); 
   btns.add(Ext.apply(config)); 
  } 
 }; 
   
 var viewport = Ext.create('Ext.Viewport', { 
  layout:'border', 

  items: [{ 
   id:'btns', 
   region:'west', 
   baseCls:'x-plain', 
   split:true, 
   width:150, 
   minWidth: 100, 
   maxWidth: 250, 
   layout:'fit', 
   margins: '5 0 5 5', 
   items: { 
    baseCls: 'x-plain', 
    html: '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>' 
   } 
    }, { 
   region:'center', 
   margins: '5 5 5 0', 
   layout: 'anchor', 
   items:[{ 
    anchor: '100%', 
    baseCls:'x-plain', 
    layout: { 
     type:'hbox', 
     padding: 10 
    }, 
    defaults:{ 
     margins:'0 5 0 0', 
     pressed: false, 
     toggleGroup:'btns', 
     allowDepress: false 
    }, 
    items: [{ 
     xtype:'button', 
      
     text: 'Spaced / Align: left', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'left' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'tbspacer', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        margins:'0' 
       }] 
      }, 'spaced'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Multi-Spaced / Align: left', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'left' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'tbspacer', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'tbspacer', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'tbspacer', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        margins:'0' 
       }] 
      }, 'multi spaced - align left'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Align: left', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'left' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4' 
       }] 
      }, 'align left'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4' 
       }] 
      }, 'align center'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Align: stretch', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'stretch' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4' 
       }] 
      }, 'align stretch'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Align: stretchmax', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'stretchmax' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Jamie' 
       },{ 
        xtype:'button', 
        text: 'Aaron' 
       },{ 
        xtype:'button', 
        text: 'Tommy' 
       },{ 
        xtype:'button', 
        text: 'Ed ' 
       }] 
      }, 'align stretchmax'); 
     } 
    }] 
   },{ 
    anchor: '100%', 
    baseCls:'x-plain', 
    layout: { 
     type:'hbox', 
     padding: '0 10 10' 
    }, 
    defaults:{ 
     margins:'0 5 0 0', 
     pressed: false, 
     toggleGroup:'btns', 
     allowDepress: false 
    }, 
    items: [{ 
     xtype:'button', 
     text: 'Flex: Even / Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 2', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 3', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        flex:1, 
        margins:'0' 
       }] 
      }, 'align flex even'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Flex: Ratio / Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 2', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 3', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        flex:3, 
        margins:'0' 
       }] 
      }, 'align flex ratio'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Flex + Stretch', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        align:'stretch' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 2', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 3', 
        flex:1 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        flex:3, 
        margins:'0' 
       }] 
      }, 'align flex + stretch'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Pack: start / Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        pack:'start', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4' 
       }] 
      }, 'align pack start + align center'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Pack: center / Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        pack:'center', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        margins:'0' 
       }] 
      }, 'align pack center + align center'); 
     } 
    },{ 
     xtype:'button', 
     text: 'Pack: end / Align: center', 
     handler: function(){ 
      replace({ 
       layout: { 
        type:'vbox', 
        padding:'5', 
        pack:'end', 
        align:'center' 
       }, 
       defaults:{margins:'0 0 5 0'}, 
       items:[{ 
        xtype:'button', 
        text: 'Button 1' 
       },{ 
        xtype:'button', 
        text: 'Button 2' 
       },{ 
        xtype:'button', 
        text: 'Button 3' 
       },{ 
        xtype:'button', 
        text: 'Button 4', 
        margins:'0' 
       }] 
      }, 'align pack end + align center'); 
     } 
    }] 
   }] 
  }] 
 }); 
});



 

sandykwx
关注
专栏目录
ExtJS笔记----FormPanel的使用
04-04
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
ExtJS笔记---Grid实现后台分页
04-05
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...
Extjs 关于Vbox布局方式
m0_37822534的博客
09-09 602
一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。 二、fl...
Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介
weixin_30252709的博客
11-26 473
VBox布局方式，熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchma...
Ext.js表单—Vbox布局（46）
鹿惊的博客
12-21 565
/** * This example shows how to use vbox layout with Ext JS Forms. * 怎么用vbox布局表单 */ Ext.define('KitchenSink.view.form.VBoxLayoutForm', { extend: 'Ext.window.Window', xtype: 'form-vboxlayout'
ExtJs Panel滚动条
ˉ-_lishk_-ˉ
07-04 7103
想要显示滚动条时一般使用autoScroll:true，但是如果只想显示 横向 或 纵向 滚动条 之一，autoScroll 显示不行。 可以使用下面方法，此处以只显示纵向滚动条为例： 首先不要设置autoScroll，默认为false, 再设置此值：bodyStyle:'overflow-x:hidden;overflow-y:auto;' 只显示横向滚动条相信你知道怎么做了。
箱子布局攻略 (HBox/VBox Layout)
热门推荐
zhangxin09的专栏
05-28 3万+
一、了解箱子布局 箱子布局是一种新颖的布局方式，其布局模型可以更好地优化 UI 设计的工作。它率先在 XUL 界面语言中被提出，广泛应用于 Mozilla 的应用程序，如 FireFox 等等。在 CSS 布局系统中（for CSS3），作为新增的补充形式，箱子布局可以指定子元素在水平或垂直的任意一种方向进行排列，剩下有多的空间由已声明了的子元素来填空（声明 flex 项）。
ExtJS-MVC-4-CRUD:ExtJS 4 MVC CRUD 教程
07-07
ExtJS 4 MVC CRUD 教程演示了使用 sencha 的 ExtJS 4 框架和 MVC 使用 ExtJS Grid 创建/读取/更新/删除记录（书籍）。 在我的博客上阅读全文。 输出： 在任何浏览器中打开 HTML 文件，输出将类似于下图。 您可以...
ExtJs常用布局--layout详解实例代码
05-23
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
语言程序设计资料：ExtJs学习笔记-2积分.doc
09-17
语言程序设计资料：ExtJs学习笔记-2积分.doc
Extjs中面板布局的应用 Extjs Layout
weixin_34284188的博客
10-25 99
目标：       介绍Panel布局的各种类       Panel布局类在VS中的介绍 内容：       Panel布局类有10种：容器布局，自适应布局，折叠布局，卡片式布局，锚点布局，绝对位置布局，表单布局，列布局，表格布局，边框布局       1，Ext.layout.ContainerLayout 容器布局       提供容器作为布局的基础逻辑，通常会被扩展而不通过ne...
ExtJS4学习笔记(三)---VBox的使
nuoyan666的专栏
08-02 2559
要使用VBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、left（默认）：排列于容器左侧。     2、center ：控件在容器水平居中。     3、stretch：控件横向拉伸至容器
ExtJs常用布局--layout详解（含实例）
weixin_30377461的博客
05-23 1000
序言： 笔者用的ExtJs版本：ext-3.2.0 ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 本文所有实例代码已提供下载，下载链接：ExtJs常用布局--layout详解实例代码 简介： 最常用的边框布局—...
Ext4使用总结（二）简单的hbox布局
大脑与思维的专栏
11-07 3750
布局的合理利用： 如图： { xtype:'container', margins:'5 0 0 0', layout:{ align:'stretch
Extjs5.0(5)：为项目添加左侧导航栏（treepanel）
kopapai
01-06 6878
上一篇文章我们已经为项目添加了header，接下来修改左侧导航栏为树（treepanel）。 View/main目录下建立Navigation.js Ext.define('MyApp.view.main.Navigation', { extend: 'Ext.tree.Panel',//继承treepanel xtype: 'app-navigation',
木禾讲解Ext JS界面设计（布局,xtype,items,vbox,form,column）
木禾
10-24 1864
关键词： xtype,items,vbox,hbox,anchor,defaults,padding,frame,ui,form,column,
Ext3.2 布局——vbox layout
专注于应用与管理！
02-11 1532
一种在容器中垂直布置项目的布局。 此布局在包含一个数字 flex 配置项的 子项目之间分割可用垂直空间。通过配置 align 选项，此布局也可以用来设置子项目的宽度。  Ext.onReady(function() { var currentName; var replace = function(config, name) {
ExtJS4学习笔记：创建Window组件
"这是一份关于ExtJS4学习的笔记，主要讲解了如何使用新的创建组件的方法Ext.create来创建窗口（Window）并介绍了动态加载JS以提高渲染效率。笔记中还提到了在某些浏览器中使用Ext.Window可能无法正确显示Window的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值