ExtJs:ViewPort容器在浏览器窗口缩小后的不显示拖动条问题

最新推荐文章于 2021-02-01 03:25:07 发布

闸北米

最新推荐文章于 2021-02-01 03:25:07 发布

阅读量1k

点赞数

文章标签： ext4 extjs 浏览器布局 mvc

本文链接：https://blog.youkuaiyun.com/wc79866/article/details/22684059

版权

当使用ExtJS MVC模式并以ViewPort作为页面容器时，浏览器窗口缩小时，页面内容无法完全显示。原因是ViewPort布局在窗口缩小后不支持滚动条。解决此问题的方法是将容器类型从Ext.container.Viewport更改为Ext.container.Container，虽然可能影响性能，但能确保显示完整内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述:
通过ExtJS MVC模式进行页面填充时，如果使用Ext.container.Viewport作为页面容器，那么在浏览器窗口被缩小后，只能显示局部的页面内容。

异常原因:
ExtJs的ViewPort布局，默认为渲染到整个html的Body中，并且在页面窗口缩小后没有对显示拖动条的支持，所以该问题属于Ext ViewPort本身的不足

解决方法:
在app层定义容器的地方，将容器从Ext.container.Viewport更改为Ext.container.Container即可，因为ViewPort是继承了Container的，所以从性能上可能会变差，但是可以解决该显示问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

闸北米

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Ext Js入门第10篇-使用Ext.container.Viewpost整体布局

qq_29258777的博客

05-26

378

Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局 Ext.onReady(function() { //创建一个TreeStore，TreeStore负责为Tree提供数据 var store=Ext.create('Ext.data.TreeStore',

解决Extjs下拉框不显示的问题

10-19

解决ExtJS中ComboBox下拉框不显示的问题，通常需要从组件渲染、Z-Index管理、父容器影响以及事件处理等多个角度进行排查。通过监听组件事件并动态调整样式，可以有效地避免因层叠顺序问题导致的显示异常。同时，良好...

参与评论您还未登录，请先登录后发表或查看评论

extjs中的控件无法正常显示

dowhathowtodo

02-28

140

在extjs开发中，不同页面的布局经常会使用复制、粘贴一些控件的代码，但是发现在调试时当同时打开2个以上页面，控件不能正常显示。（如下拉选项出现在左上角）原因就是复制过来的控件id重复了，在extjs中控件名称可以重复，但id一定不能重复，即使在不同.js页面中。解决方法：去掉id或者重命名。...

Extjs4.2布局——Ext.container.ViewportView

weixin_33724046的博客

12-12

274

先贴出官方文档的关于此布局的描述：“ 一个专门的容器用于可视应用领域（浏览器窗口）. Viewport渲染自身到网页的documet body区域，并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。一个页面中只能创建一个Viewport。任何的Container容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局layo...

Ext.container.Viewport

weixin_33913332的博客

04-10

156

　　Ext.container.Viewport代表浏览器窗口的整个区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个Viewport实例。此外它没有提供对滚动条的支持，如果需要使用滚动条需要在其子面板中进行设置。　　1、简单示例　　HTML代码： <!DOCTYPE html PUBLIC "-//W3C//...

extjs Viewport 滚动条

q494621459的博客

06-12

455

最近使用ExtJs开发过程中遇到一种情况，就是anychart图形和grid一起展示的效果，图形和列表一起展示，如果沾满全屏的话，总是不会满足客户业务量的需求，数据量一多，页面就展示不开了通过多方咨询、查找，最后搞定，如下设置： :lol: [align=left]var centerPanel = new Ext.Panel({ region : 'center', ...

解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题

10-27

在Web开发中，浏览器兼容性问题常常困扰着开发者，尤其是涉及到JavaScript库如ExtJS时。本文将探讨如何解决一个常见的问题：ExtJS在Chrome和Firefox中正常显示，但在Internet Explorer (IE) 中无法正常加载。这个...

解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题

10-30

总之，解决ExtJS在Firefox中关闭窗口后再打开时iframe中js函数访问不到的问题，关键在于使用`document.getElementById('iframeid').contentWindow.myFunc();`的调用方式，并确保对其他浏览器的兼容性处理。同时，...

Extjs TriggerField在弹出窗口显示不出问题的解决方法

10-29

在探讨Extjs TriggerField在弹出窗口显示问题之前，我们有必要了解Extjs TriggerField本身。Extjs TriggerField是Extjs框架下的一个组件，它继承自TextField，并且拥有一个附加的触发按钮，该触发按钮可以用于打开一...

ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件...

lvdong5830的专栏

12-21

257

本篇讲解三个容器类控件。一、面板控件 Ext.Panel 一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项： 1.title:设置面板标题文本。 2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。 3.html，items:前者用来设置正...

Extjs使用Window最小化窗口

08-05

自己做的，关于EXTJS 实现最下化功能，点击新建窗口，能创建一个窗口，并在工具条里新建一个那妞与之对应，点击按钮实现最小化，再次点击按钮还原窗口。是我花了三的时间研究出来的，与大家分享！！

extjs给panel添加滚动条_javascript – 在ViewPort中ExtJS TabPanel缺少滚动条

weixin_35538624的博客

02-01

322

我有一个ViewPort,我想打开一些标签.我的一个标签很长,应该从页面底部开始.但是,侧面缺少滚动条.这是我的视口设置：var viewport = new Ext.Viewport({layout:'border',enableTabScroll:true,deferredRender:true,items:[new Ext.BoxComponent({ // rawregion:'north...

ExtJS4 组件收缩

祥子的博客

08-29

1145

效果图： Ext.define('V5.test.view.Viewport', { extend : 'Ext.container.Viewport', layout : 'border', requires : ['V5.test.view.Tview'], items : [{ split : true, collapsible : true, hideCollaps

EXT--使用Ext.container.Viewport结合表格布局

开发者博客

09-29

400

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &am

使用 Ext.container.Viewport结合表格布局

天螺蛳

06-28

267

使用ViewPort(可视窗口区域) Ext.onReady(function(){ Ext.create('Ext.container.Viewport',{ //也可以写成 Ext.create('Ext.Viewport',{ layout:'border',//表格布局 items:[{ title:'north Pan...

ExtJs4 编写首页面，Ext.container.Viewport，layout，border，accordion，treepanel

だ冷悦清风だ的专栏

11-14

2146

var content = 'aaaa'; Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create('Ext.container.Viewport', { layout: 'border', items: [{ region: 'north', hei

EXTJS, Viewport区域自动适应

thtwinj2ee的专栏

08-14

222

[img]http://dl.iteye.com/upload/picture/pic/96686/13106708-4c0b-3277-927c-8daf52971297.jpg[/img] [img]http://dl.iteye.com/upload/picture/pic/96684/fa5be143-4758-3b6c-adb4-6f56d1681c7c.jpg[/img] [c...

ExtJS ViewPort的使用

HOKING的专栏

12-26

2762

ViewPort代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。 ViewPort静态效果显示 //静态效果显示 Ext.onReady(function(){ Ext.create('Ext.

如何解决ExtJS GridPanel数据加载后在某些浏览器中不显示的问题？