`

Extjs4.0中hbox用法

阅读更多
要使用HBOX的属性,首先要熟悉一下属性的内容:
一、align:字符类型,表示组件的对齐方式,有如下几种:
1.top(默认):排列与容器顶部
2.middle:垂直居中排列与容器中
3.stretch:垂直排列且拉伸义填补容器高度
4.stretchmax:垂直拉伸,并且组件以最高高度的组件为准
二、flex:数值类型,指示组件在容器中水平呈现方式,通俗的讲,就是指示组件在容器中的相对宽度
三、pack,字符类型,指组件在容器中的位置,有如下几种:
1.start(默认):组件在容器左边
2.center:组件在容器中间
3.end:组件在容器右边
实例代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>component.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=GB18030">
    <!--根据自己工程中的情况设置  -->
    <link rel="stylesheet" type="text/css" href="../../Extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="../../Extjs/bootstrap.js"></script>
 	<script type="text/javascript" src="../../js/window/hbox.js"></script>
  </head>
  
  <body>
    This is my HTML page. <br>
  </body>
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</html>



hbox.js文件如下:
  Ext.onReady(function(){
     var d1 = Ext.create('Ext.panel.Panel',{
        title:'HBOX 顶端对齐,且组件在容器的左边',
        frame:true,
        width:600,
        height:100,
        items:[{
            anchor:'100%',
            layout:{
               type:'hbox',
               padding:'10',
               pack:'start',
               align:'top'
            },
            defaults:{
               margins:'0,5,0,0'
            },
            items:[{
               xtype:'button',
               text:'button1'
            },{
               xtype:'button',
               text:'button2'
            },{
               xtype:'button',
               text:'button3'
            },{
               xtype:'button',
               text:'button4'
            }]

        }]
     });
     d1.render('d1');
     var d2 = Ext.create('Ext.panel.Panel',{
        title:'HBOX 垂直对齐,且组件在容器的右边',
        frame:true,
        width:600,
        height:100,
        items:[{
            anchor:'100%',
            layout:{
               type:'hbox',
               padding:'10',
               pack:'end',
               align:'middle'
            },
            defaults:{
               margins:'0,5,0,0'
            },
            items:[{
               xtype:'button',
               text:'button1'
            },{
               xtype:'button',
               text:'button2'
            },{
               xtype:'button',
               text:'button3'
            },{
               xtype:'button',
               text:'button4'
            }]

        }]
     });
     d2.render('d2');
     var d3 = Ext.create('Ext.panel.Panel',{
        title:'HBOX 垂直水平居中,且所有控件的高度为最高控件的高度',
        frame:true,
        width:600,
        height:100,
        items:[{
            anchor:'100%',
            layout:{
               type:'hbox',
               padding:'10',
               pack:'center',
               align:'stretchmax'
            },
            defaults:{
               margins:'0,5,0,0'
            },
            items:[{
               xtype:'button',
               text:'Small size'
            },{
               xtype:'button',
               scale:'medium',
               text:'Middle size'
            },{
               xtype:'button',
               scale:'large',
               text:'Large size'
            }]

        }]
     });
     d3.render('d3');     
  });
  • 大小: 43.2 KB
分享到:
评论

相关推荐

    Extjs 4.0中文版API

    Extjs 4.0中文版API

    ExtJS4.0中文API(chm版和网页版)

    ExtJS4.0中文API chm版:包括ExtJS4,js,jquery 网页版:全面的详细的ExtJS4.0 api

    ExtJs4.0 手册中文版

    教程可能包括安装环境、创建第一个应用、理解基本组件的使用方法,以及逐步进阶到更复杂的主题,如远程数据加载和AJAX通信。 最后,`EXT_js_中文手册.pdf`可能是另一个版本或形式的ExtJS 4.0中文文档,它可能提供与...

    Extjs4.0中文学习手册、入门详解

    本手册涵盖了 ExtJS 4.0 的基础知识、环境搭建、基本使用方法等方面的内容。 1. ExtJS 4.0 的基础知识 ExtJS 4.0 是一个基于 JavaScript 的 Rich Internet Application(RIA)框架,提供了许多强大的功能,包括 UI...

    extJs4.0 开发手册源码

    通过对照书中的讲解和源码,开发者可以更深入地理解EXTJS4.0的用法和设计模式,提升自己的开发技能。 总的来说,EXTJS4.0开发手册源码是一个宝贵的资源,无论是对于初学者还是经验丰富的开发者,都能从中获益匪浅,...

    EXTJS4.0视频教程配套代码

    看到其它地方 分太高,问大家省点分. 只有代码,视频请百度看. 第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件... 第三十讲:extjs4.0的desktop使用讲解

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    ExtJs4.0官方版本

    ExtJS 4.0拥有详尽的API文档,涵盖了所有组件、方法和事件,方便开发者查阅和使用。 9. 兼容性和性能优化 4.0版本对浏览器兼容性进行了全面优化,支持主流的浏览器,同时通过改进渲染机制和事件处理提高了整体性能...

    EXTJS4.0视频教程 30集 下载地址

    ### EXTJS 4.0 视频教程 30集 关键知识点解析 #### 一、EXTJS 4.0 概述与安装配置 **1.1 EXTJS 4.0简介** EXTJS 4.0是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。它提供了一套丰富的UI组件...

    EXTjs4.0学习文档

    例如,在 EXTJS 4.0 中,我们可以使用 getKey 函数来获取对象的键值。我们可以定义一个 Person 对象,然后使用 getKey 函数来获取其名称。我们也可以使用 getValue 函数来获取对象的值,如果对象中没有该值,则返回...

    免费 Extjs4.0教程视频

    ### 免费Extjs 4.0教程视频知识点概览 #### 第一讲:Extjs 4.0概述与Hello World程序 - **Extjs 4.0简介**: - Extjs是一款基于JavaScript的开源前端框架,用于构建交互式的Web应用程序。 - 版本4.0引入了许多新...

    EXTJS4.0视频教程配套代码包含action类

    在EXTJS4.0中,action类是用来定义与服务器的通信模式,包括GET、POST、PUT、DELETE等HTTP方法。这些操作是通过数据模型(Model)和数据代理(Proxy)来实现的,数据代理将客户端的操作转换为适当的HTTP请求,并处理...

    ExtJs4.0入门教程

    ExtJs4.0入门教程,详细介绍ExtJs4.0。

    extjs4.0技术

    通过上述内容的学习,你应该能够掌握Extjs4.0的基本使用方法,包括环境搭建、基础操作、元素获取与操作、事件绑定以及布局管理等方面的知识。这些基础知识对于深入学习Extjs4.0是非常有帮助的。

    ExtJS4.0开发笔记

    ExtJS4.0开发笔记

    Extjs4.0基础学习指南

    一款很好的适合Extjs4.0初学者学习的word文档,示例加上简单的标注说明,使你很快对Extjs4.0进入入门阶段,不可多得的文档,值得下载

    Extjs4.0学习指南(中文)

    ### Extjs4.0 学习指南核心知识点详解 #### 一、获取与安装Extjs4.0 **1.1 获取Extjs4.0** - **官方资源**: 访问官方...希望初学者能够通过本文掌握Extjs4.0的核心概念与使用方法,进一步探索其更深入的功能特性。

    extjs 4.0 extjs

    `overview` 和 `welcome` 可能是介绍性的文档或页面,它们可能包含了关于ExtJS 4.0的概述、新手引导以及如何开始使用的信息。 在ExtJS 4.0中,新的布局管理器提供了更多的灵活性,使得组件布局更加直观。此外,图表...

    (Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip

    【标题】:“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术,并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的,提供...

    Extjs4.0+MVC模式+存动态加载

    在这个主题中,我们将深入探讨如何在ExtJS 4.0中结合MVC模式实现动态加载功能。 **MVC模式** MVC模式是一种软件设计模式,它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。在...

Global site tag (gtag.js) - Google Analytics