ExtJs之进度条实现

weixin_34029949

于 2016-03-19 18:33:00 发布

阅读量119

点赞数

文章标签： javascript ViewUI

慢慢按书上的作。

<!DOCTYPE html>
<html>
<head>
    <title>ExtJs</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
        <script type="text/javascript" src="ExtJs/ext-all.js"></script>
        <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
        <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
        <STYLE TYPE="text/css">
            .cutom .x-progress-inner {
                height: 17px;
                background: #fff;
            }
            .custom .x-progress-bar {
                height: 15px;
                background: transparent url("http://127.0.0.1:8000/ExtJs/exclamation.gif") repeat-x 0 0;
                border-top: 1px solid #BEBEBE;
                border-bottom: 1px solid #EFEFEF;
                border-right: 0;
            }
        </STYLE>
    <script type="text/javascript">
            Ext.onReady(function(){
                /*
                var ProgressBar = new Ext.ProgressBar({
                    width: 300,
                    renderTo: 'ProgressBar'
                });
                
                var count = 0;
                var percentage = 0;
                var progressText = '';
                
                Ext.TaskManager.start({
                    run:function(){
                        count++;
                        if(count>10) {
                            ProgressBar.hide();
                            }
                        percentage = count/10;
                        progressText = percentage * 100 + '%';
                        ProgressBar.updateProgress(percentage, progressText, true);
                    },
                    interval: 1000,
                    repeat: 6
                });*/
                
                var ProgressBar = new Ext.ProgressBar({
                    text: 'working....',
                    width: 300,
                    renderTo: 'ProgressBar',
                    cls: 'custom'
                });
                ProgressBar.wait({
                    duration: 10000,
                    interval: 1000,
                    increment: 10,
                    text: 'wating',
                    scope: this,
                    fn: function() {
                        alert('update finish!');
                    }
                });
            });
    </script>
</head>
<body>
    <div id='ProgressBar'></div>
</body>
</html>

weixin_34029949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJs之进度条实现

慢慢按书上的作。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;ExtJs&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;
复制链接

扫一扫