ExtJS& IE7:简单窗口渲染问题 [英] ExtJS & IE7: Rendering problems with simple window

查看:128
本文介绍了ExtJS& IE7:简单窗口渲染问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经创建了这个非常简单的窗口扩展。在Firefox中,它应该是应该的,但在IE7中,包含的项目流出窗口。

I have created this very simple window extension. In Firefox it looks like it should, but in IE7, the contained items flow out of the window.

我可以如何解决这个问题?

代码(Doctype是严格的,但不会由于某种原因显示)

Code: (Doctype is strict, but won't display for some reason)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Online example</title>
    <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" />

    <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>     

    <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>    

</head>
<body>

<script type="text/javascript">

Ext.onReady(function(){

    MyWindow = Ext.extend(Ext.Window, {
        layout: 'fit',
        width: 370,
        height: 500,
        resizable: true,
        closable: true,
        closeAction: 'hide',
        collapsible: true,
        autoScroll: true,
        bodyStyle: 'padding:5px;',
        title: 'Window',

        initComponent: function () {

            var config = {
                items:
                [
                    {
                        xtype: 'fieldset',
                        title: 'Buffer valg',
                        layout: 'form',
                        items:
                        [
                            {
                                xtype: 'numberfield',                                                                                                       
                                fieldLabel: 'Label'                                    
                            }, {
                                xtype: 'checkbox',
                                fieldLabel: 'Label',
                                checked: true                                    
                            }
                        ]
                    }
                ]
            }

            Ext.apply(this, Ext.apply(this.initialConfig, config));

            // Config object has already been applied to 'this' so properties can 
            // be overriden here or new properties (e.g. items, tools, buttons) 
            // can be added, eg:

            // Call parent (required)
            MyWindow.superclass.initComponent.apply(this, arguments);
        }   
    });

    AWindow = new MyWindow();
    AWindow.show();
});

</script>

</body>
</html>


推荐答案

我认为Jaitsu已经在这里使用 autoScroll:true ),但我必须指出另外一个缺陷。

I think Jaitsu already got the main issue here (the use of autoScroll: true), but I have to point out one other flaw.

你为什么写initialConfig?

Why are you writing to initialConfig?

initComponent: function () {
    var config = {
        ...
    };
    Ext.apply(this, Ext.apply(this.initialConfig, config));

initialConfig应该只包含传递给组件构造函数的配置。它在克隆组件时使用。即使文档说它是只读的。如果你不是100%确定,那么不要这样做。此外,我不明白为什么要这样做。当你编写initComponent时,你的组件将会正常工作:

initialConfig should only contain the config that is passed to the constructor of the component. And it is used when cloning the component. Even the docs say it is read-only. If you aren't 100% sure then don't do it. Besides, I don't see why you would want to do it. Your component will work just fine when you write initComponent like so:

initComponent: function () {
    // you can set all the config options directly to this.
    this.items = [
        ...
    ];
    MyWindow.superclass.initComponent.call(this);
}

这篇关于ExtJS&amp; IE7:简单窗口渲染问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆