浅谈ExtJS的布局

ExtJs的最大特性之一就是可用简单的方法来进行布局。我们可通过合适的类来定义固定布局或非固定布局。比如,我们来为容器内的子组件设置布局时,如没有定义布局,则缺省使用auto布局。auto布局是将子组件在容器内一个接一个的来显示的。
ExtJs中可以用很多布局来安排组件,比如:accordions,cards,columns,table等。
一些常用的布局有:

  • 边界布局
  • 适应布局
  • 卡片布局
  • 手风琴布局
  • 锚定布局

边界布局

边界布局(border) 将容器空间分成了5个区域:north,south,west,east和center。可以将子组件放在任意区域,但是必须要使用center区域。

Ext.onReady(function(){ 
    Ext.create('Ext.panel.Panel', { 
        width: 600, 
        height: 400, 
        title: 'Border Layout', 
        layout: 'border', //指定为边界布局
        items: [{ 
            xtype: 'panel', 
            title: '南区', 
            region: 'south', // region 
            height: 100
        },{ 
           xtype: 'panel', 
           title: '西区', 
           region:'west', // region 
           width: 200, 
          collapsible: true, 
          layout: 'fit'
      },{ 
        title: '中间区域', 
        region: 'center', 
        layout: 'fit', 
        html:'<b>中间区</b>' 
    }], 
   renderTo: Ext.getBody() 
  }); 
});   

适应布局

适应布局(fit)一般用于容器内只有一个组件时。这样组件会占用容器的所有可用空间,当容器改变大小时,组件会跟着容器来适应新的尺寸大小。
如下代码:

Ext.onReady(function(){ 
    var win = Ext.create("Ext.window.Window",{ 
        title: "我的窗体", 
        width: 200, 
        height: 200,
        layout: "fit", 
        defaults: { 
            xtype: "panel", 
            height: 60, 
            border: false 
       }, 
      items: [ 
          {title: "Menu", html: "主菜单"}, 
          {title: "Content", html: "主内容!"} 
      ] 
   }); 
   win.show(); 
});

卡片布局

手风琴布局

锚定布局

推荐阅读更多精彩内容

  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 42,048评论 22 648
  • 原文链接:https://github.com/opendigg/awesome-github-android-u...
    IM魂影阅读 31,120评论 6 469
  • GitHub上受欢迎的Android UI Library 内容 抽屉菜单 ListView WebView Sw...
    郝赫阅读 14,156评论 1 166
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,295评论 1 91
  • 2017北京音乐生活展到今天为止已经是展会举办的第三天啦~当然特别不愿意告诉大家的是,今天也是2017北京音乐生活...
    歌者盟阅读 254评论 0 0
  • 短暂的休息 今日中午运气不错,在东寺塔附近找到一家新开的咖啡厅,非常别致,氛围很好,而且顾客相当少,于是在那里度过...
    Houge_Langley阅读 47评论 0 0
  • 一 山道悠悠,溪谷潺潺,清风缓缓,流云漫漫,春日里的玄谷山,一片清幽烂漫景象。 窄窄的青石路上,一个修长俊逸的身影...
    拆刀阅读 2,618评论 11 46
  • 简书,好似一个小社会。 有的人,活的潇潇洒洒,风生水起,一篇文章出手,点赞打赏评论者即刻蜂拥而至,一时间门庭若市。...
    jiangming888阅读 308评论 29 15