问题描述

看到一个Ext 布局的实例问题,当点击左边的收合时,中间的区块并不会自动的填充余下的页面,导致右边留下一段空白。点击一下tab 就正常了。

分析了一下,使用的是Ext 的border 进行布局,有north、 west和center 三个区块。north 和west 都很简单,导致问题的应该是center 区块。

这个center 区块的写法时: 使用contentEl 指定一个div, 然后创建一个 Ext tab 的Component 来renderTo 到这个div, 简化的代码如下:

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
Ext.onReady(function() {var viewport = Ext.create('Ext.Viewport', {layout: {type: 'border',padding: 0           },

[Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab)相关推荐

  1. [Ext JS 4] 布局之实战二 - 中间区块不会自动伸展 (tab)续

    前言 [Ext JS 4] 布局之实战一 - 中间区块不会自动伸展 (tab) 在上一篇中,中间的tab 区块无法自动伸展的原因一句话说就是: 使用contentEL的方式,相关HTML元素不会参与组 ...

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

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

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

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

  4. Ext Js MVC系列二 利用Application和Viewport进行应用程序初始化和页面布局

    通过上一篇我们已经对Ext js MVC框架开发有了一个大概的了解,这一篇将利用Application和Viewport进行应用程序的初始化和页面布局.我想从以下几方面来进行总结. 1,通过Ext.L ...

  5. 谈谈Ext JS的组件——布局的使用方法续二

    绝对布局(Ext.layout.container.Absolute) 绝对布局让我回想到了使用Foxpro开发的时候,哪时候的界面布局就是这样,通过设置控件的左上角坐标(x,y)和宽度来进行的,因为 ...

  6. [Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

    前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其 ...

  7. [Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况

    前言 关于 Extjs 的 load mask 的使用,可以参考: [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏 一般而言,在如下情况下可能要使用grid 的 reconfi ...

  8. [Ext JS 4] 实战之Grid, Tree Gird 动态添加列续(性能考虑)

    前言 延续: [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇. 在上一篇中有提到在grid 中如何进行带隐藏栏位的动态添加方式.归纳一下思路就是: 先显示,后隐藏. 当 ...

  9. [Ext JS 4] 实战之Grid, Tree Gird 动态添加行

    前言 在 [Ext JS 4] 实战之Grid, Tree Gird 动态添加列 这一篇中,有介绍到如何动态添加一列 -- 设置新columns 后调用reconfigure 方法. 这里来承接这一篇 ...

最新文章

  1. TiXml使用详解(转)
  2. 【响应式Web前端设计】CSS3 :nth-of-type() 选择器
  3. Oracle11gExp导出空表方法
  4. ways to keep health
  5. 【转】十分有用的linux shell学习总结
  6. system文件_解压MIUI 10 升级包 system.new.dat.br
  7. 西门子数控面板图解_学好四要点让你迅速成为数控机床“操作高手”
  8. XML基本概念及增删改查操作
  9. 有关SQL Server代理的常见问题和示例
  10. jsp内置对象*response
  11. GO语言环境搭建 及 helloworld开发
  12. pku 1639 Picnic Planning 最小度限制生成树
  13. [已解决]罗技鼠标驱动打不开问题
  14. python批量查询ip归属地_IP地址地理信息批量查询小工具
  15. js去掉字符串的空格
  16. 【新功能】摹客Figma插件功能升级!标注切图效率加倍
  17. html代码学习离线文档,新手学HTML代码的简易方法
  18. APM监控--(六)Dapper,大规模分布式系统的跟踪系统
  19. 全年营业额怎么计算_产值是怎么计算的(GDP年产值是营业收入吗)
  20. Android aar包的so和jniLibs中的so库冲突

热门文章

  1. eclipse启动报错 Problems occurred when invoking code from plug-in: org.eclipse.jface
  2. 【3-16】数据库基本编程语句,存储过程,触发器
  3. 如何使用SubtitleWorkshop制作字幕
  4. Asp.Net MVC中DropDownListFor的用法(转)
  5. Web报表工具iReport 1.2.2 详解
  6. 【报告分享】2020程序员人群洞察报告.pdf(附下载链接)
  7. 【报告分享】2020年数字政府新基建发展白皮书.pdf(附下载链接)
  8. 【好文推荐】梁宁:人一通透,就不怎么算小账
  9. Python自然语言处理------分类和标注词汇
  10. python获取调用函数的注释,如何使用函数注释验证函数调用类型