Sencha Touch 之 layout(布局)

最新推荐文章于 2016-12-19 00:10:20 发布
最新推荐文章于 2016-12-19 00:10:20 发布
阅读量1.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Sencha Touch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/KINGDVC/article/details/19481585
本文详细介绍了ExtJS中四种主要布局方式：HBox（水平纵向排列）、VBox（水平横向排列）、Fit（子组件适应父容器全尺寸）及Docking（水平纵向对接），并提供了具体的代码实现示例。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一：HBox
水平纵向排列

代码：
Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext .create('Ext.Container' ,{
            fullscreen: true,  //全屏
            layout: 'hbox',  //水平纵向布局
            items:[
                  {
                        xtype: 'panel',
                        html: '消息列表' ,
                        flex:1  //宽度所占比例为全屏的1/3
                  },
                  {
                        xtype: 'panel',
                        html: '消息视图' ,
                        flex:3
                  }
            ]
        })
    }  
});
二：VBox
水平横向(垂直)排列

代码:
Ext.application({
    name: 'MyApp',

    launch: function() {
        Ext .create('Ext.Container' ,{
            fullscreen: true,
            layout: 'vbox',
            items:[
                  {
                        xtype: 'panel',
                        html: '消息列表' ,
                        flex:1  //高度所占比为全屏高度的1/3
                  },
                  {
                        xtype: 'panel',
                        html: '消息视图' ,
                        flex:2
                  }
            ]
        })
    }  
});
三：Fit
子组件适应父类容器的全尺寸(全屏)

代码:
Ext.application({
    name: 'MyApp',
    launch: function() {
       var panel = Ext .create('Ext.Panel' ,{
            width:200,
            height:200,
            layout: 'fit',  //充满父类窗口
            items:[
                  {
                        xtype: 'panel',
                        html: 'Also 200px by 200px'
                  }
            ]
        });
      Ext .Viewport.add(panel);
    }  
});
四：Docking(对接)
水平纵向对接

代码:
Ext.application({
    name: 'MyApp',
    launch: function() {
       var panel = Ext .create('Ext.Container' ,{
            fullscreen: true,
            layout: 'hbox',
            items:[
                  {
                        docked: 'top',  //对接位置
                        xtype: 'panel',
                        height: '50',
                        html: 'This is docked to the top'
                  },
                  {
                        xtype: 'panel',
                        html: '消息列表' ,
                        flex:1
                  },
                  {
                        xtype: 'panel',
                        html: '消息视图' ,
                        flex:2
                  }
            ]
        });
    }  
});
水平纵向对接

代码:
Ext.application({
    name: 'MyApp',
    launch: function() {
       var panel = Ext .create('Ext.Container' ,{
            fullscreen: true,
            layout: 'hbox',
            items:[
                  {
                        docked: 'left',  //对接位置
                        xtype: 'panel',
                        height: '50',
                        html: 'This is docked to the top'
                  },
                  {
                        xtype: 'panel',
                        html: '消息列表' ,
                        flex:1
                  },
                  {
                        xtype: 'panel',
                        html: '消息视图' ,
                        flex:2
                  }
            ]
        });
    }  
});

Sencha Touch 2 -- 页面布局
07-03
用Sencha Architect Tool开发的第一个程序.
sencha touch accordion(折叠) 布局
05-21
Sencha Touch 是一款用于开发移动Web应用程序的JavaScript框架，它提供了丰富的组件和布局方式，使得开发者可以构建出具有原生感的触摸友好型应用。在Sencha Touch中，`Accordion`布局是一种特殊的布局方式，主要...
sencha touch 入门系列 (九) sencha touch 布局layout
weixin_30472035的博客
04-14 160
布局用来描述你应用程序中组件的大小和位置，在sencha touch中，为我们提供了下面几种布局： 　　1.HBox: 　　HBox及horizontal box布局，我们这里将其称为水平布局，下面是一段演示代码： 1 Ext.create('Ext.Container', { 2 fullscreen: true, 3 layout: 'hbox', 4 ...
【翻译】探究Ext JS 5和Sencha Touch的布局系统
weixin_33976072的博客
04-25 126
原文：Exploring the Layout System in Ext JS 5 and Sencha Touch布局系统是Sencha框架中最强大和最有特色的一个部分。布局要处理应用程序中每一个组件的尺寸和位置。在Ext JS和Sencha Touch直接有许多相似之处，尤其是现在Ext JS 5开始支持平板更是如此。下面让我们来探讨一下布局系统是如何跨域Sencha框架进行工作的。布局...
sencha touch之布局
Jason's Word
09-30 1364
今天记录一下关于sencha touch中的机种布局，其实很简单的，还是直接上代码，一目了然 1：box布局，其实就是vbox和hbox，说白了一个是横着摆放，一个是竖着摆放 Ext.application({ name:'myApp', launch: function(){ var myPanel=Ext.create('Ext.Panel',{ id:'
Sencha第二章 布局(2) Card布局
浮夸
09-26 207
一、Fit布局 Fit布局很有特点，它只允许自己的第一个item被显示出来，并且填充满自己。如果它的item多于一个，那难免是会出些意外的情况的。 如果你发现你的容器内的控件有的没有全部被显示出来，那不妨看看它的layout是否为fit，试着将它强制设为vbox往往就能解决问题。 下图是在一个layout为fit的Panel里放了三个button的结果： 所以说：除非你想营造些令人...
Sencha Touch 2页面布局开发实践指南
Sencha Touch 2的页面布局是移动应用开发中的关键环节，它决定了应用程序中各个组件如何在屏幕上分布和排列。 使用Sencha Architect Tool开发Sencha Touch 2应用程序时，开发者能够通过图形界面来设计应用的布局，...
Sencha Touch实现折叠布局的详细指南
在Sencha Touch中，布局是用来管理组件空间和位置的组件。其中，Accordion布局（折叠布局）是一种常见的用户界面模式，允许用户通过点击某个标题来展开或折叠某个内容区域。 ### 标题解析：Sencha Touch Accordion...
sencha touch 模仿tabpanel导航栏TabBar的实例代码
09-04
- `layout`：布局配置，设置为`align: 'stretch'`，使得每个按钮在水平方向上平分空间。 - `defaults`：设置默认配置，这里的`flex: 1`让每个按钮具有相同的弹性空间。 - `selectButton`：记录当前选中的按钮。 ...
Sencha Touch项目源码分享：CityQingBao
- **社区和文档**：SenchaTouch拥有活跃的开发社区，提供大量的学习资源、案例和讨论。Sencha 官方也提供详尽的文档和API参考，这为学习和开发提供了极大的帮助。 - **Sencha Architect**：Sencha Architect 是一个...
Touch MCU Layout 注意事项
01-14
Touch MCU Layout 注意事项
Sencha Touch 2 快速入门系列（五）-- 布局（Layouts）
热门推荐
Ardy's
05-07 1万+
本文已添加至Sencha Touch 2快速入门系列索引：http://blog.youkuaiyun.com/ardy_c/article/details/7544470 转载请注明出处：http://blog.youkuaiyun.com/ardy_c/article/details/7542256 布局（Layouts）是什么，相信也不用我在这里多说。无论是网页，还是手机应用，我们都需要给自己的
触控(Touch) 、 布局(Layout)
weixin_30608131的博客
12-15 293
1 使用触控实现一个简易的画板 1.1 问题 触控（Touch）是一个UITouch类型的对象，当用户触摸了屏幕上的视图时自动被创建，通常使用触控实现绘图、涂鸦、手写等功能。本案例使用触控实现一个简易的画板，可以在画板上勾画出一条线，如图-1所示： 图-1 1.2 方案 首先在创建好的SingleViewApplication项目中创建一个画板类TRDrawView，继承至UIV...
Sencha Touch学习笔记（三）布局
hewei12x的专栏
04-20 646
之前的文章提到了layout: ‘hbox’,这个其实就是布局。本篇主要就来讲layout，布局在Extjs和Sencha Touch中都是很重要的一部分，也有相似的部分，当然Sencha Touch作为移动框架，布局也很有移动端的特性。 布局描述是组件的大小和位置。 Sencha Touch的布局有hbox、vbox、card、fit、dock等等。Hbox LayoutExt.create(
使用sencha-touch控件制作布局的平板电脑界面
CF西西的专栏
11-02 1009
P.S由于国内twitter上不去，所以没有数据显示 效果如下： html页面上的js引用： Pandora --> index.js中代码 Ext.application({ name: 'Sencha', launch: fun
[Phonegap+Sencha Touch] 移动开发59 移动web页面N宫格图标布局怎么实现？
小桥流水丿小溪
08-20 1577
很多人不知道要如何实现图标的N宫格布局。我来说下思路。 一、等宽占比 其实就是一行要显示几列的问题，也就是一行里的各个图标占宽度相同。 如果要一行显示3个图标，那就是每个图标宽度占33.3333%如果要一行显示4个图标，那就是每个图标宽度占25%如果要一行显示5个图标，那就是每个图标宽度占20% div布局就是，外层一个宽度100%的div，里面N个图标div（
sencha > layout (布局)
mft8899的博客
10-21 160
横向布局 Ext.create('Ext.Container', { fullscreen: true, layout: 'hbox', items: [ { xtype: 'panel', html: 'message list', flex: 1 ...
Android Keyboard/Touch Panel分析
嵌入精灵
12-01 2691
分析一下 Android 是如何读取按键及Touch Panel 的驱动的。主要在$(ANDROID_DIR)/frameworks/base/libs/ui/EventHub.cpp这个文件中，这是在 HAL 层，将一步步分析 Android 上层是如何接受事件的。 一， 先看一下 Android HALClass EventHub 在  $(ANDROID_DIR)/frameworks/base/include/ui/eventhub.h 定义. i. scan_dir(const char *dir
五行代码实现 炫动滑动 卡片层叠布局，仿探探、人人影视订阅界面 简单&优雅：LayoutManager+ItemTouchHelper...
weixin_33991418的博客
12-19 588
想经济上支持我 or 想通过视频看我是怎么实现的: edu.youkuaiyun.com/course/deta… 概述 前几天看有人实现了仿人人美剧的订阅界面，不过在细节之处以及实现方式我个人认为都不是最佳的姿势。于是我也动手撸了一个，还顺带撸了个探探的界面，先看GIF：探探皇帝翻牌子即视感 人人美剧订阅界面 这里吐个槽，探探这种设计真的像皇帝翻牌子的感觉，不喜欢左滑，喜欢右滑。 人人影视版特点（需求）：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值