今天记录一下关于sencha touch中的几种布局,其实很简单的,还是直接上代码,一目了然

1:box布局,其实就是vbox和hbox,说白了一个是横着摆放,一个是竖着摆放

Ext.application({
name:'myApp',
launch: function(){
var myPanel=Ext.create('Ext.Panel',{
id:'myPanel',
layout:{
type:'hbox',
pack:'end'
},
items:[
{
html:'One',
flex:1,
style:'background-color:red'
},
{
html:'two',
flex:2,
style:'background-color:green'
}
]
}) Ext.Viewport.add(myPanel); } })

第二种card布局,可以想象成多个叠加在一起的卡片,比如一副扑克都放在一起,一次只能看到一张

Ext.application({

	name:'itKingApp',
/**
* card 布局
*/
launch:function(){
var panel=Ext.create('Ext.Panel',{
//card 布局: 父容器内可以存在多个子组件,但每一次只能显示一个,所以需要使用setActiveItem
// 来设置显示的子组件
// 可以使用docked配置选项,进行停靠,上下左右
layout:'card',
items:[
{
//docked:'left',
html:'第一个',
style:'background-color:green'
},
{
//docked:'right',
html:'第二个',
style:'background-color:yellow'
}
] });
Ext.Viewport.add(panel);
panel.setActiveItem(1);
}
})

第三种是fit布局,fit就是填满的意思,就是不满父容器了

Ext.application({

	name:'itKingApp',
/**
* fit 布局
*/
launch:function(){
var panel=Ext.create('Ext.Panel',{
items:[
{
html:'myPanel',
style:'background-color:green'
}
],
layout:'fit'
//fit 布局: 1:只存在一个子组件时,自动扩展到与父容器同样的大小
// 2:一般都为1个子组件,如果存在多个的话,也只显示一个,
}); Ext.Viewport.add(panel)
}
})

以上这些,其实自己用代码试验两次,就知道怎么回事了,这只是大体布局,其实精确的还是使用css了

作者:jjx0224 发表于2013-9-30 10:10:43 原文链接
阅读:111 评论:0 查看评论

[原]sencha touch之布局的更多相关文章

  1. 【翻译】探究Ext JS 5和Sencha Touch的布局系统

    原文:Exploring the Layout System in Ext JS 5 and Sencha Touch 布局系统是Sencha框架中最强大和最有特色的一个部分. 布局要处理应用程序中每 ...

  2. [原]sencha touch之表单(login demo)

    现在来说说sencha touch中的表单,举个简单的login的例子,相关的说明我都放在了注释中,看下面代码 Ext.application({ id:'itKingApp', launch:fun ...

  3. [原]sencha touch之carousel

    carousel组件是个非常不错的东东,自带可滑动的效果,效果如下图 上面部分可以左右滑动,下面部分可以上下滑动,效果还是不错的,app程序中很有用的布局 代码如下: Ext.application( ...

  4. [原]sencha touch之panel和tabpanel

    最近在弄senchatouch的项目,所以边学习边开发,边记录,直接记录下test code如下: Panel: Ext.application({ name:'itKingApp', launch: ...

  5. [原]sencha touch之表单二(注册页面)

    接着上一篇的登陆页面,来一个最简单的注册页面,几乎包含了常用的field Ext.application({ id:'itKingApp', launch:function(){ var formPa ...

  6. [原]sencha touch之NavigationView

    还是直接上代码,都是基本的几个容器控件,没什么还说的 Ext.application({ name:'itkingApp', launch:function(){ var view =Ext.crea ...

  7. 【翻译】在Ext JS和Sencha Touch中创建自己定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  8. 【翻译】在Ext JS和Sencha Touch中创建自定义布局

    原文:Creating Custom Layouts in Ext JS and Sencha Touch 布局系统是Sencha框架中最强大和最独特的一部分.布局会处理应用程序中每个组件的大小和位置 ...

  9. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

随机推荐

  1. jquery--实现类似淘宝星星评分功能

    -   不正之处,欢迎指正.^-^.好绕的话 贴码.html <body> <div id="div"> <ul> <li>☆< ...

  2. Java 记录日志

    Java9的日志级别: ALL 最低级别,系统会输出所有的日志信息,会生成大量的·.冗余的日志 TRACE 输出系统的各种跟踪信息,会生成大量的·.冗余的日志 DEBUG 输出调试信息,会生成较多的日 ...

  3. 关闭VAX的拼写检查_解决中文红色警告问题

    菜单VAssistX->Visual Assistant X Options->Advanced->Underlines下 取消“Underline spelling errors  ...

  4. SQL重复记录查询-count与group by having结合查询重复记录

    查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select  peopleId  from  p ...

  5. 使用CreateProcess函数运行其他程序

    为了便于控制通过脚本运行的程序,可以使用win32process模块中的CreateProcess()函数创建一个运行相应程序的进程.其函数原型如下.CreateProcess(appName, co ...

  6. LeetCode Merge Two Sorted Lists 归并排序

      题意: 将两个有序的链表归并为一个有序的链表. 思路: 设合并后的链表为head,现每次要往head中加入一个元素,该元素要么属于L1,要么属于L2,可想而知,此元素只能是L1或者L2的首个元素, ...

  7. COGS 11. 运输问题1

    ★★☆   输入文件:maxflowa.in   输出文件:maxflowa.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述]     一个工厂每天生产若干商品,需运输到 ...

  8. GetIPAddress——获得本地IP地址信息

    1.gethostname()需要初始化套接字库 加载#pragma comment(lib,"ws2_32.lib"),和WSAStartup(MAKEWORD(2,2),&am ...

  9. 安装express

    就目前来说安装express需要走几个步骤,要不就会出现在检查版本的时候就会出现,expres不是内部的命令或者是这种 安装的步骤: 1. 先是输入npm install -g express-gen ...

  10. happy2018暑期集训课后习题001

    根据需求补全下面的代码: 需求: 每行输入三个整数a.b.c,根据a的值不同对b和c进行不同的操作: a为0时,计算b+c a为1时,计算b-c a为2时,计算b*c a为3时,计算b/c 并输出操作 ...