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

最新推荐文章于 2021-02-01 03:25:07 发布
原创 最新推荐文章于 2021-02-01 03:25:07 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ext4 #extjs #浏览器 #布局 #mvc

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

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

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

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

闸北米
关注
Ext Js入门第10篇-使用Ext.container.Viewpost整体布局
qq_29258777的博客
05-26 409
Ext.container.Viewport是一款非常常用的布局容器，它会自动把自己输出到HTMl页面，而且在页面的上中下左右中5个布局 Ext.onReady(function() { //创建一个TreeStore，TreeStore负责为Tree提供数据 var store=Ext.create('Ext.data.TreeStore',
extjs中的控件无法正常显示
dowhathowtodo
02-28 168
在extjs开发中，不同页面的布局经常会使用复制、粘贴一些控件的代码，但是发现在调试时当同时打开2个以上页面，控件不能正常显示。（如下拉选项出现在左上角） 原因就是复制过来的控件id重复了，在extjs中控件名称可以重复，但id一定不能重复，即使在不同.js页面中。 解决方法：去掉id或者重命名。...
Extjs4.2布局——Ext.container.ViewportView
weixin_33724046的博客
12-12 304
先贴出官方文档的关于此布局的描述：“ 一个专门的容器用于可视应用领域（浏览器窗口）. Viewport渲染自身到网页的documet body区域， 并自动将自己调整到适合浏览器窗口的大小，在窗口大小发生改变时自动适应大小。 一个页面中只能创建一个Viewport。 任何的Container容器都可以作为一个Viewport 的子组件，开发者使用一个Viewport作为父容器配置布局layo...
Ext.container.Viewport
weixin_33913332的博客
04-10 184
　　Ext.container.Viewport代表浏览器窗口的整个区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个Viewport实例。此外它没有提供对滚动条的支持，如果需要使用滚动条需要在其子面板中进行设置。 　　1、简单示例 　　HTML代码： <!DOCTYPE html PUBLIC "-//W3C//...
extjs Viewport 滚动条
q494621459的博客
06-12 489
最近使用ExtJs开发过程中遇到一种情况， 就是anychart图形和grid一起展示的效果， 图形和列表一起展示，如果沾满全屏的话，总是不会满足客户业务量的需求，数据量一多，页面就展示不开了 通过多方咨询、查找，最后搞定，如下设置： :lol: [align=left]var centerPanel = new Ext.Panel({ region : 'center', ...
ExtJs4 笔记（9） Ext.Panel 面板控件、 Ext.window.Window 窗口控件、 Ext.container.Viewport 布局控件...
lvdong5830的专栏
12-21 290
本篇讲解三个容器类控件。 一、面板控件 Ext.Panel 一个面板控件包括几个部分，有标题栏、工具栏、正文、按钮区。标题栏位于最上面，工具栏可以在四个位置放置，围绕中间部分正文，按钮区位于最小方。下面介绍几个基本配置项： 1.title:设置面板标题文本。 2.tbar,lbar,rbar,bbar:分别设置上、左、右、下四个部位的工具栏。 3.html，items:前者用来设置正...
解决Extjs下拉框不显示的问题
10-19
解决ExtJS中ComboBox下拉框不显示的问题，通常需要从组件渲染、Z-Index管理、父容器影响以及事件处理等多个角度进行排查。通过监听组件事件并动态调整样式，可以有效地避免因层叠顺序问题导致的显示异常。同时，良好...
解决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入门：ViewPort详解与实战示例
文档中的【标题】提及的"ViewPort"是ExtJS中一个关键的概念，它是一个特殊的容器，全屏占据浏览器的显示区域，无需指定`renderTo`属性，因为它会默认渲染到HTML页面的`body`元素上。ViewPort的主要功能是随着浏览器...
Extjs使用Window最小化窗口
08-05
自己做的，关于EXTJS 实现最下化功能，点击新建窗口，能创建一个窗口，并在工具条里新建一个那妞与之对应，点击按钮实现最小化，再次点击按钮还原窗口。是我花了三的时间研究出来的，与大家分享！！
extjs给panel添加滚动条_javascript – 在ViewPort中ExtJS TabPanel缺少滚动条
weixin_35538624的博客
02-01 340
我有一个ViewPort,我想打开一些标签.我的一个标签很长,应该从页面底部开始.但是,侧面缺少滚动条.这是我的视口设置：var viewport = new Ext.Viewport({layout:'border',enableTabScroll:true,deferredRender:true,items:[new Ext.BoxComponent({ // rawregion:'north...
ExtJS4 组件收缩
祥子的博客
08-29 1182
效果图： 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 418
<!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 299
使用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 2177
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 259
[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 2819
ViewPort代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个ViewPort实例，此外它没有提供对滚动条的支持，如果需要使用滚动条，那么应该在其子面板中进行设置。 ViewPort静态效果显示 //静态效果显示 Ext.onReady(function(){ Ext.create('Ext.
如何解决ExtJS GridPanel数据加载后在某些浏览器中不显示的问题？
最新发布
11-02
在使用ExtJS进行开发时，确保GridPanel正确显示数据是关键。当遇到在特定浏览器如Firefox开启或关闭Firebug插件后GridPanel显示正常，而直接运行时却不显示数据的情况，可以尝试以下步骤进行排查和解决问题： 参考资源链接：[ExtJS Grid数据加载后不显示的解决方法](https://wenku.youkuaiyun.com/doc/7ukrxv2r6h?spm=1055.2569.3001.10343) 1. **检查布局刷新**：在添加Grid到TabPanel后，调用父容器的`doLayout()`方法，确保布局正确更新。例如，在添加Grid的代码段之后添加`parentContainer.doLayout();`。 2. **检查可见性**：确认Grid或其父容器没有被意外设置为隐藏。通过检查`gridpanel.hidden`属性确保其为`false`。 3. **检查尺寸设置**：确保Grid的尺寸被正确设置，或者其父容器有足够的空间。可以通过CSS强制指定宽度和高度，或使用`flex`布局确保自动适应。 4. **调整渲染策略**：如果使用了延迟渲染，尝试将`autoRender`属性设置为`true`，确保Grid在尺寸确定后立即渲染。 5. **审查事件监听逻辑**：检查事件监听器的唯一性和正确性，确保没有逻辑错误或不必要的重复代码，这可能会导致渲染或显示问题。 6. **执行跨浏览器测试**：虽然在Firefox和Internet Explorer中没有报错，仍需在不同浏览器中测试以排除兼容性问题。 通过上述方法，你可以系统地排查和解决GridPanel显示问题。同时，推荐查看《ExtJS Grid数据加载后不显示的解决方法》这份资料，它详细介绍了相关问题的解决方案，帮助开发者更好地理解和运用ExtJS进行开发。 参考资源链接：[ExtJS Grid数据加载后不显示的解决方法](https://wenku.youkuaiyun.com/doc/7ukrxv2r6h?spm=1055.2569.3001.10343)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值