0

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

你好世界
你好！！！

使用默认的 css。

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

我认为这一切都是为 Ext 按钮引入额外的 js，但无论出于何种原因，我都想知道实现稳定页面刷新的好方法。我知道我可以将 body 设置为 diplay:none 或 visibility:hidden 并在最后打开它，但想知道是否还有其他更好的方法？

谢谢。

<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>
4

1 回答 1

2

使用 Ext.onReady 代替 Ext.onDocumentReady 应该可以解决问题，但如果 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!');
    });

})
于 2012-09-18T18:54:58.377 回答