【问题】关于EXTJS中的panel嵌套panel时的布局问题

[b]问题描述:[/b]
页面中有三个FORM表单,FORMa,FORMb,FORMc,如果用viewport,可以直接将三个嵌进来,FORMa的region设成north,FORMb的设成center,FORMc的设成south。
但是,这样有一点,就是FORMb因为是center布局,高度就会自适应,导致很难看。所以我的解决方法是将FORMb和FORMc单独放在一个panel里,再将FORMb设成panel中的north,FORMc设成panel中的center。这样就相当于FORMc是自适应了。

[b]效果如下:[/b]
[img]http://dl.iteye.com/upload/picture/pic/126679/6f3e1aed-72b0-319c-9a2d-6fcbeecbcb5a.jpg[/img]

这样很OK,但点击浏览器右上角的“还原”按钮,缩小去看,发现会出现小问题。
[b]截图如下:[/b]
[img]http://dl.iteye.com/upload/picture/pic/126681/c58da020-29b2-37f9-9408-d4e442ced21e.jpg[/img]
[b]鼠标往右拉,会出现问题(红色框内):[/b]
[img]http://dl.iteye.com/upload/picture/pic/126683/01822907-53fe-3a85-9b2f-9f4817c72538.jpg[/img]
感觉像是渲染了可视画面,但没有渲染到根结点。

贴上代码:

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属性,就可以了。

[b][color=blue]更改如下:(注意第6行)[/color][/b]

//布局如下:
var cpanel = new Ext.Panel({
region : 'center',
bodyStyle : 'border:none;',
frame : true,
layout : 'border',
autoScroll : true,
items: [bForm ,cForm ]
});


[color=blue]layout属性要是没有定义,默认应该为layout:fit,文档解释如下:
[b]Ext.layout.container.Fit是布局的基础类,对应面板配置项的名称为Fit,Fit布局将使唯一的子元素充满容器,如果当前容器中存在多个子面板则只有第一个会显示。[/b]

所以在缩小的时候,cpanel也跟着缩小了,往右拉的时候,就会出现cpanel变小的情况。

layout:border,解释如下:
[b]Ext.layout.container.Border 这种布局方式称为边界布局,它将页面分隔成为:west,east,south,north,center这五个部分,我们在items里面使用region参数为它组织定义具体的位置。[/b][/color]

而我这里定义的cpanel显然是一种border布局。
【AI大模型应用开发】【RAG评估】0. 综述:一文了解RAG评估方法、工具与指标 本文主要总结了当前比较流行的RAG评估方法和指标。当前AI技术的快速发展,RAG和RAG评估是当前比较有前景的发展方向,不断有新的评估工具和理论被提出,让我们持续跟进,了解这些工具和理论,从而在使用时知道如何选择。 阅读详情

相关推荐

RcisTarget实战:从差异基因到转录因子调控网络的完整分析流程(附代码)

本文详细介绍了RcisTarget工具在转录因子调控网络分析中的完整流程,从差异基因到motif富集分析,再到结果可视化与生物学解读。通过实战代码演示,帮助研究者掌握这一强大的R包应用,揭示基因表达背后的调控机制,特别适用于基因组学和生物信息学研究。

weixin_29214199的博客 228

ExtJS中panel嵌套panel

经常遇到一个情况,点击页面上的按钮,然后页面中间部分会刷新. 可以通过动态修改panel来实现这个功能 首先定义一个空的panel 并布局到页面中央 var centerPanel = Ext.create('Ext.form.Panel', { id: 'centerPanel', layout: 'fit', frame:...

MrtangLCX的博客 1037

自抗扰控制(ADRC)原理与MATLAB实现详解

自抗扰控制(ADRC)是一种先进的鲁棒控制策略,其核心在于通过扩张状态观测器(ESO)实时估计并补偿系统总扰动。相比传统PID控制,ADRC不依赖精确数学模型,特别适合处理非线性、时变系统。从控制原理看,ADRC将系统内部动态和外部扰动统一建模,通过带宽参数化方法实现快速响应与强抗扰能力。在工程实践中,ADRC已成功应用于无人机飞控、伺服系统等场景,MATLAB仿真显示其上升时间可比PID提升46%,抗扰动恢复时间缩短60%。典型实现包含ESO设计、扰动补偿和PD控制三部分,参数整定遵循ω₀=3~5倍系统带

weixin_33585822的博客 95

EXTJS布局示例(panel,Viewport,TabPanel)

面板控件panel应用 new Ext.Panel({ title:面板头部(header), tbar : [顶端工具栏(top toolbars)], bbar : [底端工具栏(bottom toolbars)], height:200, width:300, frame:true, applyTo :panel,

软践的专栏 3万+

Nvidia Jetson AGX Orin 如何进入 Recovery Mode(刷机注意事项)

Jetson Orin 如何进入Recovery mode + 刷机注意事项

Pandako's Blog 1万+

10、犹豫双模糊TOPSIS算法:原理与实例解析

本文介绍了犹豫双模糊TOPSIS算法的基本原理与应用步骤,结合中国四家纺织公司的案例,详细解析了从构建犹豫双模糊决策矩阵、归一化处理、专家信息聚合,到确定正负理想解、计算距离与相对贴近度系数的完整决策流程。该方法有效应对决策者在评价过程中的犹豫性,适用于财务评估、项目选择等复杂多属性决策场景,具有较强的实用性和推广价值。

yhn45678901的博客 122

ext中关于替换布局中的panel

<br /><br />今天做任务碰到一个问题:左边是一颗树,右边是一个grid的布局;当点击左侧树的时候可以动态的“替换”掉右边的grid。<br />     由于右侧的grid是被二次封装过的,所以不能简单的用之前替换url的方法去解决这个问题。所以想到动态去替换panel中的item方法。这个有两个解决的方法,解法不同但是本质上都是操作一个先定义好的容器panel,再对其中需要的组件进行操作。<br />    (以下的示例没有贴完全的代码,部分实现需要自己去完成,如触发事件如何去写)<br /> 

Eric的小屋 3237

飞塔CVE-2022-40684复现

admin 无密码直接回车(会提示修改密码)

G3et的博客 1145

EXTJS Panel布局

面板控件panel应用           new Ext.Panel({               title:'面板头部(header)',               tbar : ['顶端工具栏(top toolbars)'],               bbar : ['底端工具栏(bottom toolbars)'],               height:200, 

songwenbinasdf的专栏 918

YOLO系列算法改进 | 主干改进篇 | 替换LSKNet主干特征提取网络 | 通过动态调整感受野自适应融合长程上下文,显著提升小目标与复杂背景下的检测精度!

YOLO系列算法改进 | 主干改进篇 | 替换LSKNet主干特征提取网络 | 通过动态调整感受野自适应融合长程上下文,显著提升小目标与复杂背景下的检测精度! (以YOLO26最新目标检测模型为基础,利用LSKNet替代Backbone)

2502_91881744的博客 212

开篇词:学习系统分析师的好处?核心考点有哪些?

系统分析师备考指南 系统分析师是IT行业的高级专业人才,具备系统分析与设计能力,能指导开发团队工作。学习系统分析师不仅能获得职业晋升的"黄金跳板",还能全面提升技术架构思维和业务理解能力。 核心价值: 职业发展:晋升管理岗位的硬性要求,突破职业天花板 能力提升:构建T型知识结构,培养架构思维和软技能 市场竞争力:成为"业务+技术"桥梁,获得国家级专业认证 考试内容: 计算机基础知识(硬件、操作系统、网络等) 系统分析专业知识(软件工程、架构设计等) 进阶知识(企业信息

数据知道的博客 5941

EXTJS 面板控件panel应用

EXTJS 面板控件panel应用 面板控件panel应用newExt.Panel({title:'面板头部(header)',tbar:['顶端工具栏(toptoolbars)']...

aizhejuan4396的博客 238

【推荐100个unity插件】动画重定向,快速在不同角色间共享动画,共用非人形Humanoid(泛型generic)动画——Retarget Pro

Retarget Pro是一款高效的Unity动画重定向工具,可快速在不同角色间共享动画。主要特点包括:1分钟快速设置,支持编辑器和运行时重定向;适用于人形、动物、武器等各类角色;提供基础重定向、IK重定向和FPS专用重定向三种功能模块;通过Rig组件和骨架资产实现骨骼链匹配,支持批量处理。插件包含示例项目和预设资源,操作简便且效果优于Unity原生Humanoid系统,特别适合处理手指等精细动画。

向宇的博客,专注php/web全栈 unity游戏开发,欢迎大家评论纠错 547

Extjs panel 嵌套求帮忙解答

Ext.onReady(function () { Ext.create('Ext.window.Window',{ autoShow:true, width:950, height:550, layout:'absolute', items:p2 }); var p2=Ext.create('Ext.panel.Panel',{ title:'test',

ZAZALLL的专栏 1397

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

Ext Panel嵌套问题

今天被Ext的一个特性搞得焦头烂额的,在我的程序中,有一个TabPanel,我需要在其中的一个Panel中,放置两个Panel组件,使用同样的方法,TabPanel中的第一个面板显示很正常,而第二个(选项卡第二项),不知为何,始终显示不出放在其中的两个Panel,经过一番试验,发现居然是没有设置好布局的原因…… 在这样Panel胡乱嵌套的年代,谨记要设置好布局。 ...

太杂烩 284

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

ExtJs布局详解

1、百度百科上说:ExtJs功能丰富,无人能出其右。无论是界面之美,还是功能之强,extjs都高居榜首。 2、呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局。(extjs是4.+版本) Border布局__边界布局 这中布局是最常用的布局之一,看图 border布局:border布局也称边界布局,他将页面分隔为west,east,south,north,center这五个部分...

qq_41537354的博客 222

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

ExtJS column布局后labelField无法显示的问题..。

<br />在Extjs开发的时候,如果想要并排的显示两个textField或者datefield,那肯定要用column样式的layout,但是当在其items中显示项目的时候,所有的fieldLabel都显示不出来,原因是,其column样式无法显示label,应该在中间层再嵌套一个layout:'form',然后要显示label的项作为此form层的子项即可~~<br /> <br />var pneast8 = new Ext.Panel({ region: 'center',

分享编程和生活的快乐 5944

ExtJs嵌套布局

<br />不说费话,先看图片:<br /> <br /><br /> <br />再看代码:Ext.onReady(function() {<br /> var innerCenterPanel = new Ext.Panel({<br /> title : 'innerCenter',<br /> region : 'center'<br /> });<br /> var innerBottomPanel = new Ext.Panel({<br

xuyu1980的专栏 2389

ExtJs Panel

[code="js"]var panel = new Ext.Panel({ title : "面板", renderTo:"testPanel"//Panel的外层容器一般是DIV或SPAN的 id : "testPanel" collapsible : true,// 可收缩 ...

ysonline的专栏 446

extjs嵌套panel背景色设置

var northpanel=Ext.create('Ext.panel.Panel',{ id:'northpanel', region:'north', // style:'background-color:#dfe8f6', margin:'20 0 20 20', //padding:'20 0 20 20',height:1060 可去外边线 f...

woyizhizaizhaoni的专栏 1431

ExtJS 4 布局和容器

布局系统(layout system)是ExtJS最强大的部分之一,它掌控你应用中的每一个组件的大小和位置,这篇文章函盖了怎样开始使用布局,是ExtJS 4布局的初级教程。 Containers 容器 ExtJS应用的UI界面,是由组件(Component)构建起来的,容器(Container)是一个特殊的组件,它可以盛放其他组件,每个典型的ExtJS应用都是数层嵌套的组件组成的。如图

X9X9X9X9的专栏 4659
上一篇: 【错误】Caused by: org.xml.sax.SAXParseException: cvc-elt.1: Cannot find the declara
下一篇: 【问题】spring mvc 中文乱码问题解决
angelbill3
博客等级 码龄18年 3粉丝 83原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值