Scripter/EXTJS

Extjs 프로세스바 구현하기

데꾸벅 2008. 2. 21. 19:50
아래와 같은 상태진행(progress)바를 생성할때 사용합니다.















Ext.onReady(function() {

    var percent;
    var textfield;

    var testPanel = new Ext.Panel( {
        title : 'progressbar test',
        collapsible : true,
        renderTo : document.body,
        width : 600,
        height : 200,
        bodyStyle : 'padding:10px',
        html : '<div id="_progress_"></div>',
        tbar : [
                percent = new Ext.form.NumberField( {
                    id : '_1_',
                    maxValue : 100,
                    minValue : 0,
                    width : 50,
                    value : '20'
                }),
                textfield = new Ext.form.TextField( {
                    id : '_2_',
                    width : 400,
                    value : '다운로드: - Application already exists at path /bcf'
                }),
                '-',
                {
                    text : '변경',
                    handler : function() {
                        // 상태바의 값을 입력한 값으로 계산하여 뿌려준다.
                        pbar.updateProgress(parseInt(percent.getValue()) / 100,
                                percent.getValue() + '% - '
                                        + textfield.getValue());
                    }
                }]
    });
    // 실제 프로그래스바를 생성하는 컴포넌트
        var pbar = new Ext.ProgressBar( {
            text : 'Initializing...',
            autoWidth : false,
            width : '100%',
            cls : 'left-align',
            renderTo : '_progress_'
        });
    });
}

<body><div id="techbugbar" ></div>