从 Sencha ExtJS 4.0 迁移到 ExtJS 4.1

Posted 2023-02-26

【中文标题】从 Sencha ExtJS 4.0 迁移到 ExtJS 4.1

【英文标题】：Migration from Sencha ExtJS 4.0 to ExtJS 4.1

【发布时间】：2012-11-28 15:58:39

【问题描述】：

我创建一个这样的窗口：

_target = new Ext.Window(
    layer: 'top',
    width: _width,
    height: _height,
    constrainTo: aBody,
    constrain: true,
    renderTo: aBody,
    autoScroll: true,
    flex: 1,
    modal: (targetParams.Modal != undefined) ? targetParams.Modal : false,
    resizable: (targetParams.Resizable != undefined) ? targetParams.Resizable : true,
    minimizable: (targetParams.Minimizable != undefined) ? targetParams.Minimizable : true,
    maximizable: (targetParams.Maximizable != undefined) ? targetParams.Maximizable : true,
    closable: (targetParams.Closable != undefined) ? targetParams.Closable : true,
    maximized: _maximized,
    minimzed: _minimized,
    isInFront: true
);    

然后这样做：

_target.on("render", function (items) 
    if (items.length > 0) 
        this.show();
        this.add(items);
        this.doLayout();
        var buttonText = targetParams.ButtonText || this.title;
        createToolbarButton(this.id, buttonText, targetParams.UIConfigurationId);
     else 
        _target.destroy();
    
);

问题出在this.show();这一行。在 4.0 上，这条线调用了这个函数

show: function()         
    this.callParent(arguments);
    this.performDeferredLayouts();
    return this;
,

但在 4.1 上同一行调用另一个函数：

show: function(animateTarget, cb, scope)         
    var me = this;

    if (me.rendered && me.isVisible()) 
        if (me.toFrontOnShow && me.floating) 
            me.toFront();
        
     else if (me.fireEvent('beforeshow', me) !== false) 
        me.hidden = false;

        if (!me.rendered && (me.autoRender || me.floating)) 
            me.doAutoRender();
        
        if (me.rendered) 
            me.beforeShow();
            me.onShow.apply(me, arguments);

            if (me.ownerCt && !me.floating && !(me.ownerCt.suspendLayout || me.ownerCt.layout.layoutBusy)) 
                me.ownerCt.doLayout();
            
            me.afterShow.apply(me, arguments);
        
    
    return me;
,

其中下一行尝试执行layout.renderChildren()，然后给出错误。

我认为很明显创建的对象是不同的，但我没有看到“升级 4.0 到 4.1”文档中解决了这个问题。

所以我的问题是我必须做些什么来完成这项工作？

提前感谢您的帮助。

更新：

添加窗口后的应用结构如下所示：

ViewPort
North
    ...
West
    ...
Center
    Window
        Panel
            Panel
                Label
                ...
            BorderSplitter
            Panel
                Label
                ...
        Panel
            List
South
    ...

我对代码进行了一些更改，它不再产生该错误。

_target.on("beforeRender", function (items) 
    if (items.length > 0) 
        _target.add(items);
        _target.doLayout();
        var buttonText = targetParams.ButtonText || _target.title;
        createToolbarButton(_target.id, buttonText, targetParams.UIConfigurationId);
     else 
        _target.destroy();
    
);
_target.show();
_target.toFront();

但现在当我调用 _target.add(items); 时它会生成另一个。

此行的错误是“无法获取属性 'dom' 的值”

me.container = container.dom ? container : Ext.get(container);

我尝试分析调用堆栈并找出它给出此错误的原因。当它调用这个函数时：

renderChildren: function () 
    var me = this,
        items = me.getLayoutItems(),
        target = me.getRenderTarget();

    me.renderItems(items, target);
,

其中“this”指的是窗口的布局对象，在我添加项目的位置，调用“getRenderTarget()”返回未定义。然后尝试访问undefined的dom属性，抛出我上面提到的错误。

这是我迷路的地方，因为如您所见，当我创建窗口时，我将一个对象 (aBody) 传递给 renderTo 属性。

有什么想法吗？？

【问题讨论】：

你能分享一下确切的错误吗？另外，为什么在“渲染”中调用 this.show()？

错误是“对象不支持这个属性或方法'renderChildren()'”。我在渲染中调用它以仅显示窗口，以防有任何要在其中渲染的项目。

使用这个事件（beforeshow）：docs.sencha.com/ext-js/4-1/#!/api/… 如果你不想显示窗口，则在事件中返回 false。

我做了一些更改，请检查我的问题的更新

【参考方案1】：

这与布局有关。布局“适合”它似乎可以工作。