`

Ext.Window属性modal,内存量大

阅读更多

众所周知,有了Ext,让我们省去了美工。可今天上午有客户突然反应说我们产品占用浏览器资源相当高,一个页面甚至达到了300MB-1000MB,直到内存满。开始我以为是浏览器之前访问过别的页面,资源没及时释放,可后来自己进去测试后,发现每点击一个使用Ext实现的窗口时,内存占用量都会增加50M,当时就惊叹的对自己说到:“不至于吧“。
     发现问题后开始分析,第一步开始从页面上找原因,因为首页是属于文章展示页面,所以内容比较多,开始怀疑是这个地方导致ext出现问题。于事我找了一个页面信息非常少的页面开始测试,发现点击跟Ext相关窗口内存占用量很小了。后面的具体分析与考察很复杂并猜测了很久,我就不啰嗦了,说一下最终找到的原因。
   如果用过ext的朋友应该都清楚,ext的Ext.Window有一个属性modal,可以设定窗体为模式窗口。其效果是除窗口外背景全部变为暗色,然后其他区域不能操作,只能操作显示出的window。正因为这个属性,导致每出一个窗口内存都暴增50M,甚至更高。于事自己做了个试验,找了一个页面什么内容都都没,只有一个按钮,点击就显示Ext.Window对象,然后页面上写了无数的换行标签”<br>“,目的是让页面比较长。结果惊人的结果出现了,每次show出一个window,都会占用100多M内存,换行标签越多,也就是页面越长,占用内存量就越大,而且还连续积累,不会释放,直到内存太多的时候那个特效也就会出错。

   总结出来就一句话:”页面区域越大,使用模式窗口占用的内存就越多。“,如果没发现的朋友,请谨慎使用,现在我把项目所有ext特效的modal属性都设为false后全好了。这应该也是ext的一个bug吧,我测试用的是ext2.2,希望下一版本能够解决。

   下面我贴出我试验时的demo,大家自己跑起来看看。

     http://files.cnblogs.com/dirain/extjs-bug.rar

分享到:
评论

相关推荐

    Ext window的使用

    创建一个基本的Ext.Window实例,你需要定义一些基本属性,如宽度、高度、标题等。例如: ```javascript var myWindow = Ext.create('Ext.Window', { title: '我的窗口', width: 400, height: 300, html: '...

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    learning ext js 中文版之在对话框中添加图标和按钮事件

    "学习EXT JS中文版之在对话框中添加图标和按钮事件"这一主题深入探讨了如何为EXT JS的对话框(Modal Dialog)增添视觉吸引力和功能性,通过添加图标和响应式按钮事件来提升用户体验。 EXT JS中的对话框通常用于显示...

    基于Extjs的模态对话框

    模态对话框在Extjs中被称作`Ext.window.Window`,它可以覆盖在页面其他元素之上,阻止用户与背景内容的交互,直到对话框被关闭。 首先,创建一个模态对话框的基本步骤如下: 1. 引入Extjs库:确保在HTML文件中正确...

    老师整理的extjs学习笔记

    `Ext.Window` 是一个弹出窗口组件,通常用于显示对话框或模态窗口。下面是一个简单的 `Ext.Window` 示例: ```javascript new Ext.Window({ title: 'Example Window', width: 300, height: 200, layout: 'fit',...

    learning ext js 中文版 之 根据用户操作对话框来给出响应

    var dialog = Ext.create('Ext.window.Window', dialogConfig); dialog.show(); ``` 4. 添加内容和事件监听器:对话框可以包含任何Ext JS组件,如表格、表单、按钮等。同时,我们需要监听用户与对话框的交互,例如...

    EXT弹出框改装实现

    var myWindow = Ext.create('Ext.window.Window', { title: '我的弹出框', width: 400, height: 300, closable: true, items: [{ // 在这里添加内容,如面板、表单等 }] }); myWindow.show(); ``` 在上述...

    extjs 获取焦点

    var window_add_cust = new Ext.Window({ title: 'ӿͻ', width: 420, resizable: false, autoHeight: true, modal: true, closeAction: 'hide', items: [custForm] }); ``` - **`new Ext.Window()`**: ...

    ExtJs入门实例

    var win = new Ext.Window({ title: '窗口标题', width: 400, height: 300, modal: true, items: [/* 添加窗口内的子项 */] }); win.show(); ``` #### 4. Ext.FormPanel - **基本属性**: - `title`: ...

    EXTJS button交换

    窗口可以通过配置属性如`width`、`height`、`title`来设定尺寸和标题,并可以通过`modal`属性控制是否为模态窗口。 3. **按钮点击事件处理** 在EXTJS中,你可以为按钮添加事件监听器来响应用户的点击行为。通常,...

    Extjs 4.x 得到form CheckBox 复选框的值

    CheckBox(复选框)主要用来接收用户选择的选项 如图所示(请忽略UI的不好看): 该弹出窗口的主要代码如下: 代码如下: var win = new Ext.Window({ modal : true, title : ‘确定要拒绝该表吗?’, width : 500, ...

    SSH2上传实现

    var win = new Ext.Window({ title: '文件上传', layout: 'fit', width: 400, height: 200, closeAction: 'hide', resizable: true, shadow: true, modal: true, closable: true, bodyStyle: 'padding: ...

    ExtJs2.0简明教程

    通过设置窗口的配置选项,如`modal`属性来控制窗口是否模态等。 #### 5.3 对话框 MessageBox是一种特殊的窗口,用于显示消息给用户。它可以快速地创建提示框、确认框等。 ### 六、布局layout #### 6.1 布局概述 ...

    EXTJS4.2浮动侧边框

    - 通过设置`constrainHeader`, `layout`, `title`, `id`, `plain`, `modal`, `border`, `padding`, `width`, `minWidth`, `closable`, `closeAction`等属性来定义窗口的基本样式。 - 为了使窗口能够在鼠标移动到...

    基于ExtJs在页面上window再调用Window的事件处理方法

    同时,通过设置window的各种属性,如id、title、modal、closeAction、constrain、autoScroll等,配置了一个弹出窗口的行为和外观。 值得注意的是,该代码片段还展示了一个名为showCallFlowInfoWindow的函数,它负责...

    JS小练习代码之二第1/2页

    - 窗口的配置包括 `title`、`width`、`height`、`frame`、`plain`、`modal`、`closable` 和 `collapsible` 等属性,这些决定了窗口的外观和行为。 - `items` 属性包含 `form` 对象,这意味着窗口内部有一个表单。 ...

    如何在c#web上弹出消息框

    Ext.create('Ext.window.Window', { title: '消息框', width: 400, height: 200, modal: true, items: [{ xtype: 'component', html: '这是你的消息' }], buttons: [{ text: '确定', handler: function...

    Extjs学习—总结的extjs的一些常用小知识点

    var win = new Ext.Window({ title: '带连接的window', width: 300, height: 300, html: '&lt;a href="xx.jsp"&gt;我就是URL&lt;/a&gt;' }); ``` - 说明:创建了一个包含超链接的窗口实例。 2. **`icon` 属性** - 作用...

Global site tag (gtag.js) - Google Analytics