Extjs面板中带有文本的工具类型图标

Question

如何在Extjs Panel工具类型中的图标旁添加文本？​​

实施例： 下面的代码显示Panel右上角的打印图标。

tools : [
    {
         type: 'print',
         // text : 'Print document',
         handler : function(){

             Ext.Msg.alert('print', 'you clicked print icon');
         }
    }    
]

我喜欢把它渲染为[＆＃34;打印图标＆＃34;空间＆＃34;打印文件＆＃34;]

Answer 1

我认为你不能把文字写入工具（你可以用CSS“破解”它）。但您可以为面板创建自定义header并在其中放置一个按钮。

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.mypanel',

    height: 250,
    width: 400,
    header: {
        title: 'My Panel',
        items: [{
            xtype: 'button',
            text: 'Print Document',
            iconCls: 'x-fa fa-print'
        }]
    }

});

工作小提琴https://fiddle.sencha.com/#view/editor&fiddle/1qit

Answer 2

我们有一个配置iconAlign : String possible inputs are'顶部' '对' '底部' 'left'`