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

最新推荐文章于 2023-06-30 17:29:02 发布
最新推荐文章于 2023-06-30 17:29:02 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： extjs4.0 文章标签： extjs button flex layout function border

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

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

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

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

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

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

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

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

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

    2、center：组件在容器中间

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

 

HTML代码：

 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>VBox---MHZG.NET</title>
  6. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
  7. <script type="text/javascript" src="../../bootstrap.js"></script>
  8. <script type="text/javascript" src="../../locale/ext-lang-zh_CN.js"></script>
  9. <script type="text/javascript" src="vbox.js"></script>
  10. <style type="text/css">
  11.         html, body {
  12.             font: normal 12px verdana;
  13.             margin: 0;
  14.             padding: 0;
  15.             border: 0 none;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21. </body>
  22. </html>

vbox.js：

 
  1. Ext.onReady(function() {
  2.             var currentName;
  3.             var replace = function(config, name) {
  4.                 var btns = Ext.getCmp('btns');
  5.                 if (name && name != currentName) {
  6.                     currentName = name;
  7.                     btns.remove(0);
  8.                     btns.add(Ext.apply(config));
  9.                 }
  10.             };
  11.              
  12.             var viewport = Ext.create('Ext.Viewport', {
  13.                 layout:'border',
  15.                 items: [{
  16.                     id:'btns',
  17.                     region:'west',
  18.                     baseCls:'x-plain',
  19.                     split:true,
  20.                     width:150,
  21.                     minWidth: 100,
  22.                     maxWidth: 250,
  23.                     layout:'fit',
  24.                     margins: '5 0 5 5',
  25.                     items: {
  26.                         baseCls: 'x-plain',
  27.                         html: '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>'
  28.                     }
  29.                }, {
  30.                     region:'center',
  31.                     margins: '5 5 5 0',
  32.                     layout: 'anchor',
  33.                     items:[{
  34.                         anchor: '100%',
  35.                         baseCls:'x-plain',
  36.                         layout: {
  37.                             type:'hbox',
  38.                             padding: 10
  39.                         },
  40.                         defaults:{
  41.                             margins:'0 5 0 0',
  42.                             pressed: false,
  43.                             toggleGroup:'btns',
  44.                             allowDepress: false
  45.                         },
  46.                         items: [{
  47.                             xtype:'button',
  48.                             
  49.                             text: 'Spaced / Align: left',
  50.                             handler: function(){
  51.                                 replace({
  52.                                     layout: {
  53.                                         type:'vbox',
  54.                                         padding:'5',
  55.                                         align:'left'
  56.                                     },
  57.                                     defaults:{margins:'0 0 5 0'},
  58.                                     items:[{
  59.                                         xtype:'button',
  60.                                         text: 'Button 1'
  61.                                     },{
  62.                                         xtype:'tbspacer',
  63.                                         flex:1
  64.                                     },{
  65.                                         xtype:'button',
  66.                                         text: 'Button 2'
  67.                                     },{
  68.                                         xtype:'button',
  69.                                         text: 'Button 3'
  70.                                     },{
  71.                                         xtype:'button',
  72.                                         text: 'Button 4',
  73.                                         margins:'0'
  74.                                     }]
  75.                                 }, 'spaced');
  76.                             }
  77.                         },{
  78.                             xtype:'button',
  79.                             text: 'Multi-Spaced / Align: left',
  80.                             handler: function(){
  81.                                 replace({
  82.                                     layout: {
  83.                                         type:'vbox',
  84.                                         padding:'5',
  85.                                         align:'left'
  86.                                     },
  87.                                     defaults:{margins:'0 0 5 0'},
  88.                                     items:[{
  89.                                         xtype:'button',
  90.                                         text: 'Button 1'
  91.                                     },{
  92.                                         xtype:'tbspacer',
  93.                                         flex:1
  94.                                     },{
  95.                                         xtype:'button',
  96.                                         text: 'Button 2'
  97.                                     },{
  98.                                         xtype:'tbspacer',
  99.                                         flex:1
  100.                                     },{
  101.                                         xtype:'button',
  102.                                         text: 'Button 3'
  103.                                     },{
  104.                                         xtype:'tbspacer',
  105.                                         flex:1
  106.                                     },{
  107.                                         xtype:'button',
  108.                                         text: 'Button 4',
  109.                                         margins:'0'
  110.                                     }]
  111.                                 }, 'multi spaced - align left');
  112.                             }
  113.                         },{
  114.                             xtype:'button',
  115.                             text: 'Align: left',
  116.                             handler: function(){
  117.                                 replace({
  118.                                     layout: {
  119.                                         type:'vbox',
  120.                                         padding:'5',
  121.                                         align:'left'
  122.                                     },
  123.                                     defaults:{margins:'0 0 5 0'},
  124.                                     items:[{
  125.                                         xtype:'button',
  126.                                         text: 'Button 1'
  127.                                     },{
  128.                                         xtype:'button',
  129.                                         text: 'Button 2'
  130.                                     },{
  131.                                         xtype:'button',
  132.                                         text: 'Button 3'
  133.                                     },{
  134.                                         xtype:'button',
  135.                                         text: 'Button 4'
  136.                                     }]
  137.                                 }, 'align left');
  138.                             }
  139.                         },{
  140.                             xtype:'button',
  141.                             text: 'Align: center',
  142.                             handler: function(){
  143.                                 replace({
  144.                                     layout: {
  145.                                         type:'vbox',
  146.                                         padding:'5',
  147.                                         align:'center'
  148.                                     },
  149.                                     defaults:{margins:'0 0 5 0'},
  150.                                     items:[{
  151.                                         xtype:'button',
  152.                                         text: 'Button 1'
  153.                                     },{
  154.                                         xtype:'button',
  155.                                         text: 'Button 2'
  156.                                     },{
  157.                                         xtype:'button',
  158.                                         text: 'Button 3'
  159.                                     },{
  160.                                         xtype:'button',
  161.                                         text: 'Button 4'
  162.                                     }]
  163.                                 }, 'align center');
  164.                             }
  165.                         },{
  166.                             xtype:'button',
  167.                             text: 'Align: stretch',
  168.                             handler: function(){
  169.                                 replace({
  170.                                     layout: {
  171.                                         type:'vbox',
  172.                                         padding:'5',
  173.                                         align:'stretch'
  174.                                     },
  175.                                     defaults:{margins:'0 0 5 0'},
  176.                                     items:[{
  177.                                         xtype:'button',
  178.                                         text: 'Button 1'
  179.                                     },{
  180.                                         xtype:'button',
  181.                                         text: 'Button 2'
  182.                                     },{
  183.                                         xtype:'button',
  184.                                         text: 'Button 3'
  185.                                     },{
  186.                                         xtype:'button',
  187.                                         text: 'Button 4'
  188.                                     }]
  189.                                 }, 'align stretch');
  190.                             }
  191.                         },{
  192.                             xtype:'button',
  193.                             text: 'Align: stretchmax',
  194.                             handler: function(){
  195.                                 replace({
  196.                                     layout: {
  197.                                         type:'vbox',
  198.                                         padding:'5',
  199.                                         align:'stretchmax'
  200.                                     },
  201.                                     defaults:{margins:'0 0 5 0'},
  202.                                     items:[{
  203.                                         xtype:'button',
  204.                                         text: 'Jamie'
  205.                                     },{
  206.                                         xtype:'button',
  207.                                         text: 'Aaron'
  208.                                     },{
  209.                                         xtype:'button',
  210.                                         text: 'Tommy'
  211.                                     },{
  212.                                         xtype:'button',
  213.                                         text: 'Ed '
  214.                                     }]
  215.                                 }, 'align stretchmax');
  216.                             }
  217.                         }]
  218.                     },{
  219.                         anchor: '100%',
  220.                         baseCls:'x-plain',
  221.                         layout: {
  222.                             type:'hbox',
  223.                             padding: '0 10 10'
  224.                         },
  225.                         defaults:{
  226.                             margins:'0 5 0 0',
  227.                             pressed: false,
  228.                             toggleGroup:'btns',
  229.                             allowDepress: false
  230.                         },
  231.                         items: [{
  232.                             xtype:'button',
  233.                             text: 'Flex: Even / Align: center',
  234.                             handler: function(){
  235.                                 replace({
  236.                                     layout: {
  237.                                         type:'vbox',
  238.                                         padding:'5',
  239.                                         align:'center'
  240.                                     },
  241.                                     defaults:{margins:'0 0 5 0'},
  242.                                     items:[{
  243.                                         xtype:'button',
  244.                                         text: 'Button 1',
  245.                                         flex:1
  246.                                     },{
  247.                                         xtype:'button',
  248.                                         text: 'Button 2',
  249.                                         flex:1
  250.                                     },{
  251.                                         xtype:'button',
  252.                                         text: 'Button 3',
  253.                                         flex:1
  254.                                     },{
  255.                                         xtype:'button',
  256.                                         text: 'Button 4',
  257.                                         flex:1,
  258.                                         margins:'0'
  259.                                     }]
  260.                                 }, 'align flex even');
  261.                             }
  262.                         },{
  263.                             xtype:'button',
  264.                             text: 'Flex: Ratio / Align: center',
  265.                             handler: function(){
  266.                                 replace({
  267.                                     layout: {
  268.                                         type:'vbox',
  269.                                         padding:'5',
  270.                                         align:'center'
  271.                                     },
  272.                                     defaults:{margins:'0 0 5 0'},
  273.                                     items:[{
  274.                                         xtype:'button',
  275.                                         text: 'Button 1',
  276.                                         flex:1
  277.                                     },{
  278.                                         xtype:'button',
  279.                                         text: 'Button 2',
  280.                                         flex:1
  281.                                     },{
  282.                                         xtype:'button',
  283.                                         text: 'Button 3',
  284.                                         flex:1
  285.                                     },{
  286.                                         xtype:'button',
  287.                                         text: 'Button 4',
  288.                                         flex:3,
  289.                                         margins:'0'
  290.                                     }]
  291.                                 }, 'align flex ratio');
  292.                             }
  293.                         },{
  294.                             xtype:'button',
  295.                             text: 'Flex + Stretch',
  296.                             handler: function(){
  297.                                 replace({
  298.                                     layout: {
  299.                                         type:'vbox',
  300.                                         padding:'5',
  301.                                         align:'stretch'
  302.                                     },
  303.                                     defaults:{margins:'0 0 5 0'},
  304.                                     items:[{
  305.                                         xtype:'button',
  306.                                         text: 'Button 1',
  307.                                         flex:1
  308.                                     },{
  309.                                         xtype:'button',
  310.                                         text: 'Button 2',
  311.                                         flex:1
  312.                                     },{
  313.                                         xtype:'button',
  314.                                         text: 'Button 3',
  315.                                         flex:1
  316.                                     },{
  317.                                         xtype:'button',
  318.                                         text: 'Button 4',
  319.                                         flex:3,
  320.                                         margins:'0'
  321.                                     }]
  322.                                 }, 'align flex + stretch');
  323.                             }
  324.                         },{
  325.                             xtype:'button',
  326.                             text: 'Pack: start / Align: center',
  327.                             handler: function(){
  328.                                 replace({
  329.                                     layout: {
  330.                                         type:'vbox',
  331.                                         padding:'5',
  332.                                         pack:'start',
  333.                                         align:'center'
  334.                                     },
  335.                                     defaults:{margins:'0 0 5 0'},
  336.                                     items:[{
  337.                                         xtype:'button',
  338.                                         text: 'Button 1'
  339.                                     },{
  340.                                         xtype:'button',
  341.                                         text: 'Button 2'
  342.                                     },{
  343.                                         xtype:'button',
  344.                                         text: 'Button 3'
  345.                                     },{
  346.                                         xtype:'button',
  347.                                         text: 'Button 4'
  348.                                     }]
  349.                                 }, 'align pack start + align center');
  350.                             }
  351.                         },{
  352.                             xtype:'button',
  353.                             text: 'Pack: center / Align: center',
  354.                             handler: function(){
  355.                                 replace({
  356.                                     layout: {
  357.                                         type:'vbox',
  358.                                         padding:'5',
  359.                                         pack:'center',
  360.                                         align:'center'
  361.                                     },
  362.                                     defaults:{margins:'0 0 5 0'},
  363.                                     items:[{
  364.                                         xtype:'button',
  365.                                         text: 'Button 1'
  366.                                     },{
  367.                                         xtype:'button',
  368.                                         text: 'Button 2'
  369.                                     },{
  370.                                         xtype:'button',
  371.                                         text: 'Button 3'
  372.                                     },{
  373.                                         xtype:'button',
  374.                                         text: 'Button 4',
  375.                                         margins:'0'
  376.                                     }]
  377.                                 }, 'align pack center + align center');
  378.                             }
  379.                         },{
  380.                             xtype:'button',
  381.                             text: 'Pack: end / Align: center',
  382.                             handler: function(){
  383.                                 replace({
  384.                                     layout: {
  385.                                         type:'vbox',
  386.                                         padding:'5',
  387.                                         pack:'end',
  388.                                         align:'center'
  389.                                     },
  390.                                     defaults:{margins:'0 0 5 0'},
  391.                                     items:[{
  392.                                         xtype:'button',
  393.                                         text: 'Button 1'
  394.                                     },{
  395.                                         xtype:'button',
  396.                                         text: 'Button 2'
  397.                                     },{
  398.                                         xtype:'button',
  399.                                         text: 'Button 3'
  400.                                     },{
  401.                                         xtype:'button',
  402.                                         text: 'Button 4',
  403.                                         margins:'0'
  404.                                     }]
  405.                                 }, 'align pack end + align center');
  406.                             }
  407.                         }]
  408.                     }]
  409.                 }]
  410.             });
  411.         });

 

nuoyan666
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于Extjs的panel（画布）的居中问…
tobesili2012的专栏
01-08 718
最近在学extjs，遇到了想把new出来的panel渲染后，想让其居中的问题。 看了一下网上的解法，自己也测试了一下，解决如下：   new 一个 panel：举例form：   var panel = new Ext.form.FormPanel(        {         applyTo:Ext.get("div1"),//渲染到哪个对象上，这里是id为"div1"的对象上      
ExtJs布局中，控件如何水平居中
hddfuuh的博客
11-11 2768
ExtJs布局中，控件如何水平居中
extjs panel 居中
jing的专栏
03-05 9955
layout: {                         align: 'middle',                         pack: 'center',                         type: 'hbox'                     } 如图示，fieldset居中了，textfield也居中了
ExtJS4 相关
Lyndon的专栏
06-30 245
在Ext中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。与Ext.Container相似，所有的布局类也有一个共同的超类Ext。凡是继承自该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了Ext中完整的布局系统。另外要说明的是我们经常使用Viewport对整个页面进行布局，而且每个页面只能有一个Viewport。1.Auto自动布局（系统默认）
ExtJs布局中，控件如何水平居中？
左直拳的马桶_日用桶
06-26 1万+
如此即可，有图有代码有j8:var formGridHead = Ext.create('Ext.form.Panel', { id: 'MyGridHead', region: 'north', bodyPadding: 10, bodyStyle: 'background:#fff', split: false,
extjs panel html 居中,ExtJs设置GridPanel表格文本垂直居中示例
weixin_35825868的博客
06-22 200
业务场景，需要实现最终效果图如下：GridPanel代码如下配置：复制代码 代码如下:{xtype : 'grid',id : 'grid_jglb',frame : true,region : 'center',title : '列表详细信息',columnLines : true,loadMask : true,store : 'test_store',viewConfig : {force...
ExtJS笔记----FormPanel的使用
04-04
NULL 博文链接：https://lucky16.iteye.com/blog/1490278
Extjs学习笔记(-):ComboBox联动
03-15
NULL 博文链接：https://chenxueyong.iteye.com/blog/336117
ExtJS笔记---Grid实现后台分页
04-05
NULL 博文链接：https://lucky16.iteye.com/blog/1522254
extjs4-ssi
08-21
extjs4-ssi,用户管理，角色管理，菜单管理,现成的随时使用
extjs4-ssi例子
08-21
extjs4-ssi例子，用户管理，角色管理，菜单管理等，，现成的
Extjs的button居中
halimao的博客
10-31 3371
Extjs按钮居中的两种情况
ExtJs学习笔记
llwan的专栏
10-15 651
学习笔记
flex布局中的align-items:stretch属性
热门推荐
weixin_46663461的博客
08-06 1万+
align-items:stretch align-items:stretch是一个默认值,永远保持在侧轴拉伸项目,怎么理解这句话呢? 如果侧轴是垂直方向,那么在垂直方向如果项目没有设置高度,则会拉伸至弹性父级盒子的高度, 如果侧轴为水平方向,如果项目没有设置宽度,那么就会拉伸其宽度至父级弹性盒子的宽度一致。 这里用一个布局例子详细解释这个属性 我们想实现类似于这个效果，基本的布局思路是，给一个白色的大盒子弹性布局，设置主轴方向为column，然后让其两端对其，然后再让两个盒子设置为弹性盒子，两边对齐
谈谈Ext JS的组件——布局的使用方法续一
weixin_34146986的博客
06-25 98
盒子布局 盒子布局主要作用是以水平（Ext.layout.container.HBox）或垂直方式（Ext.layout.container.VBox）来划分容器区域。这也是比较常有的布局方式。 使用盒子布局，除了要在容器定义layout配置项外，还需要在子组件指定子组件的宽度（HBox）或高度（VBox）。指定宽度或高度有两种方式，一是直接使用width或height来定...
Extjs4 新的布局方式
nuoyan666的专栏
08-02 2817
本问介绍一个常见的??例子“联系我们”在弹出窗口的形式。表单使用vbox和hbox布局，以实现一个统一的灵活的布局。 JS代码：   Ext.require([     'Ext.form.*' ]); Ext.onReady(function() {
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2098
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Extjs Vbox布局方式，以及align种类，flex，pack属性含义简介
weixin_30252709的博客
11-26 415
VBox布局方式，熟悉下一下几个主要属性：一、align：字符类型，指示组件在容器内的对齐方式。这个是基于容器的左上角来排列的。pack不同，pack是根据容器的最上边来显示的。 1、left（默认）：排列于容器左侧。 2、center：控件在容器水平居中。 3、stretch：控件横向拉伸至容器大小 。 4、stretchma...
Ext4 vBox的使用
cnsu-cmh
11-22 550
要使用VBox布局方式，首先的熟悉下一下几个主要属性： 一、align：字符类型，指示组件在容器内的对齐方式。有如下几种属性。     1、left（默认）：排列于容器左侧。     2、center ：控件在容器水平居中。     3、stretch：控件横向拉伸至容器大小     4、stretchmax:控件横向拉伸，宽度为最宽控件的宽。 二、flex:数字类型，指示组件在容器中
extjs-4.1.1安装
最新发布
11-02
extjs-4.1.1是一个用于构建富客户端应用程序的JavaScript框架。下面是安装extjs-4.1.1的步骤： 1. 首先，从官方网站（https://www.sencha.com/products/extjs/）下载extjs-4.1.1的压缩文件。 2. 解压下载的文件到项目文件夹中的一个合适的位置。 3. 在你的HTML文件中引入extjs-4.1.1的库文件。可以通过以下代码引入： ``` <script src="path/to/extjs-4.1.1/ext-all.js"></script> <link rel="stylesheet" type="text/css" href="path/to/extjs-4.1.1/resources/css/ext-all.css"> ``` 确保替换"path/to/extjs-4.1.1"为实际的extjs-4.1.1文件夹路径。 4. 初始化extjs-4.1.1。在你的JavaScript代码中，添加以下代码： ``` Ext.onReady(function() { // 在此编写你的extjs代码 }); ``` 5. 现在你可以开始使用extjs-4.1.1开发你的应用程序了。在onReady函数中添加你的extjs代码，例如创建窗口、表单、按钮等。 总之，安装extjs-4.1.1只需要下载框架文件、引入库文件，并在JavaScript代码中初始化extjs。这样，你就可以开始使用extjs-4.1.1开发功能丰富的客户端应用程序了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值