Question

当我刷新它时使用下面的代码（使用Jetty / Chrome FYI），我看到：

Hello World
你好！

使用默认的css。

然后出现延迟并显示“Click me”按钮以及引用的css。知道为什么吗？如您所见，myDiv会立即添加。如果我注释掉onDocumentReady块，那么该页面会立即显示出来。

我假设它为Ext按钮提供了额外的js，但无论什么原因我都想知道实现稳定页面刷新的好方法。我知道我的身体可以是diplay：none或visibility：隐藏并在最后打开它，但是想知道是否还有另一种更好的方法？

感谢。

<小时/>

<html>
<head>
    <title>Hello Ext</title>

    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
    <script type="text/javascript" src="extjs/ext-debug.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
<script>
    var myDiv=Ext.DomHelper.append(Ext.getBody(), {tag: 'div', cls: 'new-div-cls', id: 'new-div-id',html:'Hello!!!'});

    Ext.onDocumentReady(function(){
    var button=Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        }
    })
    })
</script>
</html>

Answer 1

使用Ext.onReady代替Ext.onDocumentReady应该可以解决问题，但是如果Ext写入所有内容，大多数Ext应用程序都能正常工作。 Ext加载JavaScript库时，Ext会为整个文档添加样式。

在标题标记下方，您可以添加样式标记，以阻止文本显示，直到加载并应用Ext。

在你的html标题中：

<title>Hello Ext</title>

<style>
    body {
        color: #fff;
    }
</style>

在现有的脚本代码中：

Ext.onReady(function(){
    var myDiv = Ext.DomHelper.append(Ext.getBody(), {
         tag: 'div', 
         cls: 'new-div-cls', 
         id: 'new-div-id',
         html:'Hello!!!'
    });

    var button = Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody()
    });

    button.on('click', function() {
        alert('You clicked the button!');
    });

})

extjs用Ext.Create闪烁，我该如何避免？

1 个答案: