Extjs - 面板工具

时间:2014-03-04 19:22:39

标签: javascript html css extjs extjs4

我有两个问题:

1-我想在我的面板标题中添加帮助图标,在折叠图标旁边(默认图标),使用:

 tools:[
{
    type:'help',
    tooltip: 'Get Help',
    handler: function(event, toolEl, panel){
        // show help here
    }
}], 

但看起来像这样:

enter image description here

如何在同一个酒吧上放置?


2-在另一个面板上,我想在标题标题旁边添加帮助图标,但它总是位于标题的右侧。我找到了一种方法将它放在左边:http://ext4all.com/post/how-to-change-collapse-tool-position.html 但无法弄清楚如何将它放在标题旁边的中间位置:

 title: '<div style="text-align:center;"/>the title</div>',

1 个答案:

答案 0 :(得分:0)

我认为你的错误是正常的。请看以下示例。

Panel Help Icon

var Promotions = Ext.create('Ext.panel.Panel', {
        id: 'promo-panel',
        bodyPadding: 5,
        width: 800,
        height: 700,
        title: 'Real PROMO - Real Promosyon Tanımlama Sistemi',
        anchor: '100%',
        renderTo: Ext.getBody(),
        collapsible: true,
        layout: {
            type: 'hbox',
            align: 'middle'
        },
        tools: [
            {
                type: 'help',
                tooltip: 'Hellow world!',
                    id: 'help_button'
            }
        ],
        style: {
            'box-shadow': '0 0 12px rgba(0, 0, 0, 0.52)',
            '-webkit-box-shadow': '0 0 12px rgba(0, 0, 0, 0.52)'
        },
        frame: true
});

关于你的第二个请求,我不知道你可以像下面那样计算标题宽度并设置图标的左边值。

// this will give you panel title width
document.getElementById('promo-panel_header_hd-textEl').offsetWidth

// try this, maybe you can do this way
var hlp = Ext.getCmp('help_button');
hlp.getEl().setStyle({left: document.getElementById('promo-panel_header_hd-textEl').offsetWidth + 10});