ExtJS 4 Ext.toolbar.Toolbar

Posted 2020-08-20

<input type="button" id="EnableToolbar" value="启用工具栏" />
<input type="button" id="DisableToolbar" value="停用工具栏" />
<br/>
<div id="toolbar"></div>

Ext.onReady(function () {
    var toolbar = new Ext.toolbar.Toolbar({
        renderTo: ‘toolbar‘
    });
    toolbar.add([
       {
           text: ‘新建‘,
           handler: onButtonClick
       }, {
           text: ‘打开‘,
           handler: onButtonClick
       }, {
           text: ‘保存‘,
           handler: onButtonClick
       }, ‘-‘,
       {
           xtype: ‘textfield‘,
           hideLabel: true,
           width: 150
       },
       ‘->‘,
       ‘<a href=#>超链接</a>‘,
       { xtype: ‘tbspacer‘, width: 50 },
       ‘静态文本‘
    ]);
    function onButtonClick(btn) {
        alert(btn.text);
    }

    Ext.get(‘EnableToolbar‘)
        .on(‘click‘,
            function () {
                toolbar.enable();
            });
    Ext.get(‘DisableToolbar‘)
       .on(‘click‘,
           function () {
               toolbar.disable();
           });

});