Firefox,ExtJS和间歇性按钮的问题

时间:2013-10-02 12:17:50

标签: javascript firefox extjs

在Firefox中,此ExtJS网页中的按钮有时不起作用,并且光标在指针和指针之间闪烁。

有没有办法解决它,因为它适用于IE和Chrome。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Button problem</title>   
        <script src="ext-all.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="ext-all-gray.css"/>
        <style>
        </style>
</head>
    <body>
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: [
                    {
                        id: 'sidePanel',
                        region: 'west',
                        xtype: 'panel',
                        width: '20%',
                        layout: {
                            type: 'vbox',
                            align: 'stretch'
                        },
                        split: true
                    },
                    {
                        id: 'tiger',
                        region: 'east',
                        width: '500px',
                        height: '500px',
                        type: 'container',
                        //layout: 'fit'
                    }
                ],
                renderTo: Ext.getBody()
                }
            );
            var button = Ext.create(
                'Ext.button.Button',
                {
                    enableToggle: false,
                    text: 'Press Me',
                    flex: 1,
                    listeners: {
                        click: function (target, e, eOpts) {
                            alert("Button Pressed!");
                        }
                    }
                }
            );

            var label = Ext.create(
                'Ext.form.Label',
                {
                    text: '1234',
                    width: '100px',
                    height: '30px',
                    padding: '0 2px 0 2px'
                }
            );

            var panel = Ext.create(
                'Ext.panel.Panel',
                {
                    title: 'Test Panel',
                    itemId: 'cine',
                    margin: 5,
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    items: [button, label]
                }
            );
            Ext.getCmp('sidePanel').add(panel);
            var dom = document.createElement('canvas'); 
            Ext.getCmp('tiger').add(dom);
            var context = dom.getContext('2d');
            var image = new Image();
            var i = 0;
            var f = function() {
                label.setText("Index is " + i);
                i++;
            };
            setInterval(f, 50)
        });

    </script>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

答案是设置面板的高度,以便每次都不必将其传出