ロード中の表示をする

メモ:

Ext JSのAPI Documentationを表示する時に最初に現れる「読み込み中」の表示をします。

読み込み中の表示例

これは、要素の重ねあわせと一定時間で重ね合わせた要素を消すことで実現しています。

[サンプル(Ext JS 2.2.1のライブラリは含まれていません)]

読み込み中...を表示するためのHTML

HTMLに、全体を覆い隠すloading-maskと「読み込み中」を表示するloading(loading-indicator)を用意します。

スタイルシート(./css/style.css)に「読み込み中」の表示が重なるよう設定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="./lib/ext/resources/css/ext-all.css">
        <link rel="stylesheet" type="text/css" href="./css/style.css" />
        <title>New Web Project</title>
    </head>
    <body>
        <div id="loading-mask" style=""></div> 
        <div id="loading"> 
            <div class="loading-indicator"> 
                <img src="img/loadinfo.net.gif" width="48" height="48" style="margin-right:8px;" align="absmiddle"/>
                読み込み中...
                </div> 
            </div> 
        </div>

        <script type="text/javascript" src="./lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="./lib/ext/ext-all-debug.js"></script>
        <script type="text/javascript" src="main.js"></script>

    </body>
</html>

「読み込み中」のスタイルシート

スタイルシートには、loading-maskを絶対位置で指定しブラウザ全体に広がるようにしています。 また、z-indexに大きな値を指定し重なりの上部へ来るように指定します。

loadingは、loading-maskの上に重なるようz-indexを指定しここで読み込み中の表示を行います。

.loading-indicatorは、Ext JSで定義されているようなのでbackground-image:none;を指定し定義済みの イメージを上書きしています。

#loading-mask {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:20000;
    background-color:white;
}

#loading{
    position:absolute;
    left:45%;
    top:40%;
    padding:2px;
    z-index:20001;
    height:auto;
}

#loading .loading-indicator{
    background-color:white;
    background-image:none;
    color:#555;
    font:bold 13px tahoma,arial,helvetica;
    padding:10px;
    margin:0;
    text-align:center;
    height:auto;
}

読み込み中の表示を消すJavaScript

覆い隠していた読み込み中の要素を消します。

用意したmain.jsの中で指定時間が経過したら要素(loading,loading-mask)を消すようにします。

Ext.BLANK_IMAGE_URL = './lib/ext/resources/images/default/s.gif';

Ext.onReady(function() {
    // クイックチップスの初期化
    Ext.QuickTips.init();

    // データー
    var gpxTrack = [
        ['2008-10-04 09:54:06',35.371586,136.643680],
        ['2008-10-04 09:54:09',35.371583,136.643082],
        ['2008-10-04 00:54:12',35.371700,136.642497]
    ];

    var store = new Ext.data.SimpleStore({
        fields: [
          {name: 'time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
          {name: 'lat', type: 'float'},
          {name: 'lon', type: 'float'}
        ],
        data: gpxTrack
    });

    var colModel = new Ext.grid.ColumnModel([
        {id:'time',header: 'time', width: 140, sortable: true,
            renderer: Ext.util.Format.dateRenderer('Y/m/d H:i:s'), dataIndex: 'time'},
        {header: 'lat', align: 'right', width: 80, sortable: true, dataIndex: 'lat'},
        {header: 'lon', align: 'right', width: 80, sortable: true, dataIndex: 'lon'}
    ]);

    var grid = new Ext.grid.GridPanel({
        store: store,
        cm: colModel,
        stripeRows: true,
        title:'GPX Data',
        region: 'center'
    });

    var panel = new Ext.Panel({
        title : 'panel_sample',
        width: 200,
        split: true,
        collapsible: true,
        region: 'west'
    });
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
          panel,
          grid
        ]
    });
    // Loading...を削除する
    setTimeout(function(){
        Ext.get('loading').remove();
        Ext.get('loading-mask').fadeOut({remove:true});
    }, 500);

});

Related Link(Ads)