adding a progress bar in extjs4 window

Question

I am very new to extjs and I just want to implement a progress bar inside a window ..

My code is this:

Ext.require(['Ext.ProgressBar']);

Ext.define('AM.view.user.Edit', {
    extend: 'Ext.window.Window',
    alias: 'widget.useredit',

    requires: ['Ext.panel.Panel'],

    title: 'Job progress',
    layout: {
        type: 'vbox',
        //align : 'stretch',
        pack: 'start',
    },
    autoShow: true,
    height: 500,
    width: 430,
    closable: false,

    initComponent: function () {
        this.items = [{
            var p = Ext.create('Ext.ProgressBar', {
                width: 300
            });

            //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
            p.wait({
                interval: 500, //bar will move fast!
                duration: 50000,
                increment: 15,
                text: 'Updating...',
                scope: this,
                fn: function () {
                    p.updateText('Done!');
                }
            });
        },

I guess this is not the correct way to include a child.. can anyone suggest me the correct way. The code for the progressbar is taken from the sencha docs example ..

Thanks,

Answer 1

You can add children in many different ways: For example:

initComponent: function () {
    var p = Ext.create('Ext.ProgressBar', {
            width: 300
        });


    this.items = [p];

    //Wait for 5 seconds, then update the status el (progress bar will auto-reset)
        p.wait({
            interval: 500, //bar will move fast!
            duration: 50000,
            increment: 15,
            text: 'Updating...',
            scope: this,
            fn: function () {
                p.updateText('Done!');
            }
        });    
};