Extjs在panel的标题栏上加按钮的方法

最新推荐文章于 2022-12-08 13:42:32 发布

wuzuyu365

最新推荐文章于 2022-12-08 13:42:32 发布

阅读量3.8k

点赞数

分类专栏： js extjs html

js 同时被 3 个专栏收录

89 篇文章

订阅专栏

html

82 篇文章

订阅专栏

extjs

33 篇文章

订阅专栏

本文介绍如何在ExtJS框架中自定义面板（MyPanel）的按钮布局，通过绝对定位实现按钮在面板标题栏的特定位置显示，避免标题栏因按钮而变高，提供代码示例。

Ext.define('MyPanel',{
    extend:'Ext.panel.Panel',
    xtype:'mypanel',
    title:'title',
    height:200,
    initComponent:function(){
        var me=this;
        me.okBtn = new Ext.button.Button({
            //按钮位置可通过此样式进行修改,如果按钮靠右显示可修改为把left改成right
            //采用此解决方案可以避免标题栏被撑高。
            style:'position: absolute;top: 5px;left: 60px;',
            text: 'ok',scope: me,
            handler:function(){
                alert('ok click');
            }
        });
        this.callParent();
    },
    onRender:function(){
        this.callParent(arguments);
        this.okBtn.render(Ext.get(this.getHeader().id));
    },
    onDestroy: function() {
        this.okBtn.destroy();
        this.callParent();
    }
});