Question

在ExtJS 4.2中，只要将“beforeRender”事件放入Ext.form.Panel定义，并创建该定义的实例，面板的标题就会消失。有没有办法可以覆盖框架功能，使标题（包含我的标题标签）显示出来？不确定这是否有所不同，但我在视口中使用“边框”布局。

缺少面板标题（带标题）：

Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does not show up',
    beforeRender: function() {        
    },    
});

enter image description here

面板标题（带标题）显示：

Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does show up',    
    //beforeRender: function() {        
    //},    
});

enter image description here

我仔细检查了标题是否在那里，但只是隐藏或者它根本不存在。这是后者。这是渲染标题时div的样子。此HTML显示在实际视图div标签下。当标题丢失时，由于有“beforeRender”事件，此HTML块根本不显示。

<div class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top" id="view-module1-activity1-1046_header" style="right: auto; left: 0px; top: 0px; width: 803px;">
    <div id="view-module1-activity1-1046_header-body" class="x-header-body x-panel-header-body x-panel-header-body-default x-panel-header-body-horizontal x-panel-header-body-default-horizontal x-panel-header-body-top x-panel-header-body-default-top x-panel-header-body-docked-top x-panel-header-body-default-docked-top x-box-layout-ct x-panel-header-body-default-horizontal x-panel-header-body-default-top x-panel-header-body-default-docked-top" style="width: 791px;">
        <div id="view-module1-activity1-1046_header-innerCt" class="x-box-inner " role="presentation" style="width: 791px; height: 16px;">
            <div id="view-module1-activity1-1046_header-targetEl" class="x-box-target" style="width: 791px;">

                <div class="x-component x-header-text-container x-panel-header-text-container x-panel-header-text-container-default x-box-item x-component-default" unselectable="on" id="view-module1-activity1-1046_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 791px;"><span id="view-module1-activity1-1046_header_hd-textEl" class="x-header-text x-panel-header-text x-panel-header-text-default" unselectable="on">this header does show up</span>
                </div>

            </div>
        </div>
    </div>
</div>

Answer 1

两件事。首先，在函数后面有一个额外的逗号。其次，beforeRender需要callParent()

Ext.define('App.view.module1.Activity1', {
    extend: 'Ext.form.Panel',
    xtype: 'view-module1-activity1',
    title: 'this header does not show up',
    beforeRender: function () {
        // code
        this.callParent(arguments);
    }    
});

Answer 2

你好，你可以这样做：

Ext.define('App.view.module1.Activity1', {
extend: 'Ext.form.Panel',
xtype: 'view-module1-activity1',
title: 'this header does not show up',
initComponent: function() {

  // code to run when component is created

  this.callParent(arguments);
},
beforeRender: function () {
    // code

 }    
});

ExtJS：在执行beforeRender事件时，Ext.form.Panel标头丢失

2 个答案: