问题描述:
页面中有三个FORM表单,FORMa,FORMb,FORMc,如果用viewport,可以直接将三个嵌进来,FORMa的region设成north,FORMb的设成center,FORMc的设成south。
但是,这样有一点,就是FORMb因为是center布局,高度就会自适应,导致很难看。所以我的解决方法是将FORMb和FORMc单独放在一个panel里,再将FORMb设成panel中的north,FORMc设成panel中的center。这样就相当于FORMc是自适应了。
效果如下:
这样很OK,但点击浏览器右上角的“还原”按钮,缩小去看,发现会出现小问题。
截图如下:
鼠标往右拉,会出现问题(红色框内):
感觉像是渲染了可视画面,但没有渲染到根结点。
贴上代码:
var aForm = new Ext.FormPanel({
region : 'north',
//其它略
});
var bForm = new Ext.FormPanel({
region : 'north',
//其它略
});
var cForm = new Ext.FormPanel({
region : 'center',
//其它略
});
//布局如下:
var cpanel = new Ext.Panel({
region : 'center',
bodyStyle : 'border:none;',
frame : true,
autoScroll : true,
items: [bForm ,cForm ]
});
// 总体布局
var viewport = new Ext.Viewport({
layout : 'border',
items : [ aForm,cpanel]
});
以上是布局代码,一开始不知道哪里出了问题,后来查阅了资料,发现在cpnacel中加layout属性,就可以了。
更改如下:(注意第6行)
//布局如下:
var cpanel = new Ext.Panel({
region : 'center',
bodyStyle : 'border:none;',
frame : true,
layout : 'border',
autoScroll : true,
items: [bForm ,cForm ]
});
layout属性要是没有定义,默认应该为layout:fit,文档解释如下:
Ext.layout.container.Fit是布局的基础类,对应面板配置项的名称为Fit,Fit布局将使唯一的子元素充满容器,如果当前容器中存在多个子面板则只有第一个会显示。
所以在缩小的时候,cpanel也跟着缩小了,往右拉的时候,就会出现cpanel变小的情况。
layout:border,解释如下:
Ext.layout.container.Border 这种布局方式称为边界布局,它将页面分隔成为:west,east,south,north,center这五个部分,我们在items里面使用region参数为它组织定义具体的位置。
而我这里定义的cpanel显然是一种border布局。
分享到:
相关推荐
Extjs 重写Panel添加click事件
Extjs 4.11 重写 Panel 添加 click事件
类似extjs中viewport的panel viewport只能渲染到body,而这个panel可以渲染到任何html元素,并且这个panel会自动变大!自动填充到最大化
panel的accordion布局以及treepanel动态导航示例
一个简单的EXTJS Panel,对于入门的学者来说,是个很好的例子。
资源名称:ExtJS布局之border实例内容简介:border布局是常见的布局样式,本文档中一个实际项目的示例,比较简单,仅供初学者参考。感兴趣的朋友可以过来看看。自动生成行号,支持checkbox全选,动态选择显示哪些列...
Extjs布局实例
基于extjs form表单的项目源码
资源名称:Extjs中布局的组合使用 中文WORD版内容简介:本文档主要讲述的是Extjs中布局的组合使用;Extjs4.1中布局很经典,也很好用,关键是如何组合布局,组合布局,不仅要达到我们想要的界面效果,还要注意因为...
ExtJs的页面布局、界面设计的源码 直接运行index.html可看效果,源码在里面
NULL 博文链接:https://maoyi606.iteye.com/blog/1782825
ExtJs中表单formPanel的横向布局
面板(panel)是ExtJS中一个很重要的概念,它相当于一幅画板,我们可以在它上面放置需要的各种组件,并使用不同的布局类对组件的摆放位置进行格式化,掌握这些布局类的特点及使用方式是突破ExtJS页面设计的关键,...
Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程
NULL 博文链接:https://zhonghuart.iteye.com/blog/1663377
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性;2、一个简单的页面布局。供参考。
Extjs checkboxgrop动态获取后台数据,并默认为全选状态