Question

在tabpanel内我有一个'collapsible'= true的面板。

当我点击图标展开时，没有任何反应。只有当我更改标签然后返回上一个标签时，才会触发展开事件并且面板会正确展开。尝试崩溃时会发生同样的奇怪行为。

我动态构建了标签面板和面板。

这就是我构建标签面板的方式：

HnBSenchaUIGeneratorClass.prototype.GenTabPanel = function (modelConfigData, targetId) {    var hnb = this;


var _layout = "auto";
if (modelConfigData.Layout) {
    _layout = (Ext.decode(modelConfigData.Layout, true) == null) ? modelConfigData.Layout : Ext.decode(modelConfigData.Layout, true);
} else {
    _layout = "auto";
}


var tabPanel = new Ext.create('Ext.tab.Panel', {
    title: modelConfigData.WindowTitle || modelConfigData.Title,
    layout: _layout,
    closable: false,
    autoScroll: true,
    activeTab: modelConfigData.ActiveTab || 0,
    tabPosition: modelConfigData.TabPosition || 'top',
    listeners: {
        beforetabchange: {
            fn: function (tabPanel, newCard, oldCard, eOpts) {
                //TODO: validar se isto não invalida ou interfere algum outro processo ou validação.
                newCard.suspendLayout = true;
            }
        }
    }
});


if (modelConfigData.ObjId != undefined) tabPanel["objId"] = modelConfigData.ObjId;


if (modelConfigData.BodyStyle != undefined) tabPanel["bodyStyle"] = modelConfigData.BodyStyle;
if (modelConfigData.Closable != undefined) tabPanel["closable"] = modelConfigData.Closable;
if (modelConfigData.Flex != undefined) tabPanel["flex"] = modelConfigData.Flex;


if (modelConfigData.Border != undefined) tabPanel["border"] = modelConfigData.Border;
if (modelConfigData.Style != undefined) tabPanel["style"] = modelConfigData.Style;
if (modelConfigData.Height != undefined) tabPanel["height"] = modelConfigData.Height;
if (modelConfigData.Width != undefined) tabPanel["width"] = modelConfigData.Width;
if (modelConfigData.Defaults != undefined) tabPanel["defaults"] = modelConfigData.Defaults;
if (modelConfigData.Margin != undefined) tabPanel["margin"] = modelConfigData.Margin;
if (modelConfigData.Padding != undefined) tabPanel["padding"] = modelConfigData.Padding;
if (modelConfigData.Property != undefined) tabPanel["dataField"] = modelConfigData.Property;
if (modelConfigData.Anchor != undefined) tabPanel["anchor"] = modelConfigData.Anchor;
if (modelConfigData.Rowspan != undefined) tabPanel["rowspan"] = modelConfigData.Rowspan;
if (modelConfigData.Colspan != undefined) tabPanel["colspan"] = modelConfigData.Colspan;
if (modelConfigData.Disabled != undefined) tabPanel["disabled"] = modelConfigData.Disabled;


var obj;
Ext.Array.each(modelConfigData.Items, function () {
    if (this.DontRender === undefined || (this.DontRender != true && this.DontRender.toString().toUpperCase() != "TRUE")) {
        switch (this.Type) {
            case "panel":
                obj = hnb.GenPanel(this, targetId);
                break;
            case "form":
                obj = hnb.GenForm(this, targetId);
                break;
            case "list":
                obj = hnb.GenGrid(this, targetId);
                break;
            case "CommandExecution":
                obj = CreateObjectByCommandExecution(this, targetId);
                break;
            default:
                break;
        }
        if (obj) {
            if (this.ObjId != undefined)
                obj["objId"] = this.ObjId;


            var SelfDisabled = false;
            if (this.SelfDisabled != undefined) {
                if (this.SelfDisabled == true) {
                    SelfDisabled = true;
                }
            }
            obj.SelfDisabled = SelfDisabled;


            if (this.Disabled != undefined)
                obj.disabled = (this.Disabled.toString().toUpperCase() === "TRUE");


            tabPanel.add(obj);
        }
    }
});
return tabPanel;

}

这就是我创建面板的方式：

HnBSenchaUIGeneratorClass.prototype.GenPanel = function (modelConfigData, targetId) {    var hnb = this;


var _layout = "auto";
if (modelConfigData.Layout) {
    _layout = (Ext.decode(modelConfigData.Layout, true) == null) ? modelConfigData.Layout : Ext.decode(modelConfigData.Layout, true);
} else {
    _layout = "auto";
}


var panel = new Ext.create('Ext.panel.Panel', {
    itemId: modelConfigData.ItemId,
    title: modelConfigData.WindowTitle || modelConfigData.Title,
    layout: _layout,
    closable: false,
    controlUrl: modelConfigData.ServiceURL
    //autoScroll: true
    //,border: modelConfigData.Border,
    //flex: modelConfigData.Flex
    //, bodyStyle: modelConfigData.BodyStyle //'background-color:green !important;'
});


if (modelConfigData.ObjId != undefined) {
    panel["objId"] = modelConfigData.ObjId;
    panel["itemId"] = modelConfigData.ObjId;
}


if (modelConfigData.Flex != undefined) panel["flex"] = modelConfigData.Flex;
if (modelConfigData.BodyStyle != undefined) panel["bodyStyle"] = modelConfigData.BodyStyle;
if (modelConfigData.Border != undefined) panel["border"] = modelConfigData.Border;
if (modelConfigData.Style != undefined) panel["style"] = modelConfigData.Style;
if (modelConfigData.Height != undefined) panel["height"] = modelConfigData.Height;
if (modelConfigData.Width != undefined) panel["width"] = modelConfigData.Width;
if (modelConfigData.Defaults != undefined) panel["defaults"] = modelConfigData.Defaults;


if (modelConfigData.Collapsible != undefined) panel["collapsible"] = modelConfigData.Collapsible;
if (modelConfigData.Collapsed != undefined) panel["collapsed"] = modelConfigData.Collapsed;
if (modelConfigData.Region != undefined) panel["region"] = modelConfigData.Region;
if (modelConfigData.Cmargins != undefined) panel["cmargins"] = modelConfigData.Cmargins;
if (modelConfigData.MinSize != undefined) panel["minSize"] = modelConfigData.MinSize;
if (modelConfigData.MaxSize != undefined) panel["maxSize"] = modelConfigData.MaxSize;




if (modelConfigData.Margin != undefined) panel["margin"] = modelConfigData.Margin;
if (modelConfigData.Padding != undefined) panel["padding"] = modelConfigData.Padding;
if (modelConfigData.Property != undefined) panel["dataField"] = modelConfigData.Property;
if (modelConfigData.Anchor != undefined) panel["anchor"] = modelConfigData.Anchor;
if (modelConfigData.Rowspan != undefined) panel["rowspan"] = modelConfigData.Rowspan;
if (modelConfigData.Colspan != undefined) panel["colspan"] = modelConfigData.Colspan;
if (modelConfigData.Disabled != undefined) panel["disabled"] = (modelConfigData.Disabled.toString().toUpperCase() === "TRUE");


addEvent(modelConfigData, panel);


var modelFields = [];
var panelFields = [];
Ext.Array.each(modelConfigData.Items, function () {
    var aux;
    if (this.DontRender === undefined || (this.DontRender != true && this.DontRender.toString().toUpperCase() != "TRUE")) {
        if (this.Type == "form") {
            aux = hnb.GenForm(this);
        }
        else {
            aux = hnb.CreateSenchaUIObject(this, panel, modelFields);
        }
    }


    if (aux) {
        panelFields.push(aux);
    }
});
panel.add(panelFields);


return panel;

}

关于为什么会发生这种情况的任何想法？

我正在使用Sencha 4.1.2a。

Answer 1

我找到了阻止这两件事的原因。

在创建选项卡面板时，我为'beforetabchange'设置了一个监听器，我执行了此操作：newCard.suspendLayout = true;

这是另一个屏幕所需要的，所以当我不想做上述事情时，我基本上会添加一个'额外'变量。最后它看起来像这样：

listeners: {
        beforetabchange: {
            fn: function (tabPanel, newCard, oldCard, eOpts) {
                if (tabPanel.enableSuspendLayout === true) {
                    newCard.suspendLayout = true;
                }
            }
        }
    }

Sencha面板没有正确折叠

1 个答案: