add extjs 6.0.1 sources

[extjs.git] / extjs / build / examples / classic / statusbar / statusbar-demo.js

Ext.require([\r
  'Ext.panel.Panel',\r
  'Ext.button.Button',\r
  'Ext.window.Window',\r
  'Ext.ux.statusbar.StatusBar',\r
  'Ext.toolbar.TextItem',\r
  'Ext.menu.Menu',\r
  'Ext.toolbar.Spacer',\r
  'Ext.button.Split',\r
  'Ext.form.field.TextArea'\r
]);\r
\r
Ext.onReady(function(){\r
\r
    // This is a shared function that simulates a load action on a StatusBar.\r
    // It is reused by most of the example panels.\r
    var loadFn = function(btn, statusBar){\r
        btn = Ext.getCmp(btn);\r
        statusBar = Ext.getCmp(statusBar);\r
\r
        btn.disable();\r
        statusBar.showBusy();\r
\r
         Ext.defer(function(){\r
            statusBar.clearStatus({useDefaults:true});\r
            btn.enable();\r
        }, 2000);\r
    };\r
\r
/*\r
 * ================  Basic StatusBar example  =======================\r
 */\r
    Ext.create('Ext.Panel', {\r
        title: 'Basic StatusBar',\r
        renderTo: 'basic',\r
        width: 550,\r
        manageHeight: false,\r
        bodyPadding: 10,\r
        items:[{\r
            xtype: 'button',\r
            id: 'basic-button',\r
            text: 'Do Loading',\r
            handler: Ext.Function.pass(loadFn, ['basic-button', 'basic-statusbar'])\r
        }],\r
        bbar: Ext.create('Ext.ux.StatusBar', {\r
            id: 'basic-statusbar',\r
\r
            // defaults to use when the status is cleared:\r
            defaultText: 'Default status text',\r
            //defaultIconCls: 'default-icon',\r
        \r
            // values to set initially:\r
            text: 'Ready',\r
            iconCls: 'x-status-valid',\r
\r
            // any standard Toolbar items:\r
            items: [\r
                {\r
                    xtype: 'button',\r
                    text: 'Show Warning & Clear',\r
                    handler: function (){\r
                        var sb = Ext.getCmp('basic-statusbar');\r
                        sb.setStatus({\r
                            text: 'Oops!',\r
                            iconCls: 'x-status-error',\r
                            clear: true // auto-clear after a set interval\r
                        });\r
                    }\r
                },\r
                {\r
                    xtype: 'button',\r
                    text: 'Show Busy',\r
                    handler: function (){\r
                        var sb = Ext.getCmp('basic-statusbar');\r
                        // Set the status bar to show that something is processing:\r
                        sb.showBusy();\r
                    }\r
                },\r
                {\r
                    xtype: 'button',\r
                    text: 'Clear status',\r
                    handler: function (){\r
                        var sb = Ext.getCmp('basic-statusbar');\r
                        // once completed\r
                        sb.clearStatus(); \r
                    }\r
                },\r
                '-',\r
                'Plain Text'\r
            ]\r
        })\r
    });\r
\r
/*\r
 * ================  Right-aligned StatusBar example  =======================\r
 */\r
    Ext.create('Ext.Panel', {\r
        title: 'Right-aligned StatusBar',\r
        renderTo: 'right-aligned',\r
        width: 550,\r
        manageHeight: false,\r
        bodyPadding: 10,\r
        items:[{\r
            xtype: 'button',\r
            id: 'right-button',\r
            text: 'Do Loading',\r
            handler: Ext.Function.pass(loadFn, ['right-button', 'right-statusbar'])\r
        }],\r
        bbar: Ext.create('Ext.ux.StatusBar', {\r
            defaultText: 'Default status',\r
            id: 'right-statusbar',\r
            statusAlign: 'right', // the magic config\r
            items: [{\r
                text: 'A Button'\r
            }, '-', 'Plain Text', ' ', ' ']\r
        })\r
    });\r
\r
/*\r
 * ================  StatusBar Window example  =======================\r
 */\r
    var win = Ext.create('Ext.Window', {\r
        title: 'StatusBar Window',\r
        width: 410,\r
        minWidth: 350,\r
        height: 150,\r
        modal: true,\r
        closeAction: 'hide',\r
        bodyPadding: 10,\r
        items:[{\r
            xtype: 'button',\r
            id: 'win-button',\r
            text: 'Do Loading',\r
            handler: Ext.Function.pass(loadFn, ['win-button', 'win-statusbar'])\r
        }],\r
        bbar: Ext.create('Ext.ux.StatusBar', {\r
            id: 'win-statusbar',\r
            defaultText: 'Ready',\r
            items: [{\r
                xtype: 'button',\r
                text: 'A Button'\r
            }, '-',\r
            Ext.Date.format(new Date(), 'n/d/Y'), ' ', ' ', '-', {\r
                xtype:'splitbutton',\r
                text:'Status Menu',\r
                menuAlign: 'br-tr?',\r
                menu: Ext.create('Ext.menu.Menu', {\r
                    items: [{text: 'Item 1'}, {text: 'Item 2'}]\r
                })\r
            }]\r
        })\r
    });\r
\r
    Ext.create('Ext.Button', {\r
        text: 'Show Window',\r
        renderTo: 'window',\r
        handler: function(){\r
            win.show();\r
        }\r
    });\r
\r
/*\r
 * ================  Ext Word Processor example  =======================\r
 *\r
 * The StatusBar used in this example is completely standard.  What is\r
 * customized are the styles and event handling to make the example a\r
 * lot more dynamic and application-oriented.\r
 *\r
 */\r
    // Create these explicitly so we can manipulate them later\r
    var wordCount = Ext.create('Ext.toolbar.TextItem', {text: 'Words: 0'}),\r
        charCount = Ext.create('Ext.toolbar.TextItem', {text: 'Chars: 0'}), \r
        clock = Ext.create('Ext.toolbar.TextItem', {text: Ext.Date.format(new Date(), 'g:i:s A')}),\r
        event = Ext.isOpera ? 'keypress' : 'keydown'; // opera behaves a little weird with keydown\r
\r
    Ext.create('Ext.Panel', {\r
        title: 'Ext Word Processor',\r
        renderTo: 'word-proc',\r
        width: 500,\r
        bodyPadding: 5,\r
        layout: 'fit',\r
        bbar: Ext.create('Ext.ux.StatusBar', {\r
            id: 'word-status',\r
            // These are just the standard toolbar TextItems we created above.  They get\r
            // custom classes below in the render handler which is what gives them their\r
            // customized inset appearance.\r
            items: [wordCount, ' ', charCount, ' ', clock, ' ']\r
        }),\r
        items: {\r
            xtype: 'textarea',\r
            id: 'word-textarea',\r
            enableKeyEvents: true,\r
            hideLabel: true,\r
            grow: true,\r
            growMin: 100,\r
            growMax: 200\r
        },\r
        listeners: {\r
            render: {\r
                fn: function(){\r
                    // Add a class to the parent TD of each text item so we can give them some custom inset box\r
                    // styling. Also, since we are using a greedy spacer, we have to add a block level element\r
                    // into each text TD in order to give them a fixed width (TextItems are spans).  Insert a\r
                    // spacer div into each TD using createChild() so that we can give it a width in CSS.\r
                    Ext.fly(wordCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});\r
                    Ext.fly(charCount.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});\r
                    Ext.fly(clock.getEl().parent()).addCls('x-status-text-panel').createChild({cls:'spacer'});\r
\r
                    // Kick off the clock timer that updates the clock el every second:\r
                 Ext.TaskManager.start({\r
                     run: function(){\r
                         Ext.fly(clock.getEl()).update(Ext.Date.format(new Date(), 'g:i:s A'));\r
                     },\r
                     interval: 1000\r
                 });\r
                },\r
                delay: 100\r
            }\r
        }\r
    });\r
\r
    // This sets up a fake auto-save function.  It monitors keyboard activity and after no typing\r
    // has occurred for 1.5 seconds, it updates the status message to indicate that it's saving.\r
    // After a fake delay so that you can see the save activity it will update again to indicate\r
    // that the action succeeded.\r
    Ext.getCmp('word-textarea').on(event, function(){\r
        var sb = Ext.getCmp('word-status');\r
        sb.showBusy('Saving draft...');\r
        Ext.defer(function(){\r
            sb.setStatus({\r
                iconCls: 'x-status-saved',\r
                text: 'Draft auto-saved at ' + Ext.Date.format(new Date(), 'g:i:s A')\r
            });\r
        }, 4000);\r
    }, null, {buffer:1500});\r
    \r
    // Set up our event for updating the word/char count\r
    Ext.getCmp('word-textarea').on(event, function(comp){\r
        var v = comp.getValue(),\r
            wc = 0, \r
            cc = v.length ? v.length : 0;\r
\r
        if (cc > 0) {\r
            wc = v.match(/\b/g);\r
            wc = wc ? wc.length / 2 : 0;\r
        }\r
        wordCount.update('Words: ' + wc);\r
        charCount.update('Chars: ' + cc);\r
    }, null, {buffer: 1});\r
\r
});\r