0

以下のコードを更新すると（Jetty/Chrome FYIを使用）、次のようになります。

ハローワールド
ハロー!!!

デフォルトのcssで。

その後、遅延が発生し、参照されている css と共に [Click me] ボタンが表示されます。理由はありますか？ご覧のとおり、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.onDocumentReadyの代わりにExt.onReadyを使用するとうまくいくはずですが、ほとんどのExtアプリは、Extがすべてのコンテンツを書き込む場合に最適に機能します。Extは、JavaScriptライブラリが読み込まれるときに、ドキュメント全体にスタイルを追加します。

タイトルタグの下に、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 に答える