extjs 表单在第二次被选中时不会在面板中呈现

Question

我有一个基本布局，可以使用树视图选择不同的组件，然后在主面板中呈现。这适用于我的所有组件（如网格），但会出现表单故障。

第一次选择表单时很好，一旦您再次尝试选择它，则不会呈现任何内容。

演示可在此处获得，页面顶部有一个指向 javascript 的链接。

http://www.somethingorothersoft.com/ext

组件的选择发生在 selectNode 函数中，我已经尽我所能尝试了一切，但没有太多结果。

Edit 正如 Jim Barrows 指出的，最好在 create 函数中实例化一个组件。我一直犹豫要不要这样做，因为这是我的真实应用程序中一个相当大的变化，我想实际保留这些实例以便于它们之间的导航。

现在我已经写了这个，我意识到要正确执行状态，我必须将它存储在服务器上，无论浏览器导航到另一个页面...

编辑我做了改变，总是像这样实例化表单，现在它更像 extJSy :) :

components['Form1'] = { xtype:'form', "items": [
 { "name": "Rep_ID", "allowBlank": false, "fieldLabel": "Rep" },
 { "name": "Date", "allowBlank": false, "fieldLabel": "Date", "xtype": "datefield" },
 { "name": "Time", "allowBlank": true, "fieldLabel": "Time", "xtype": "timefield"}],
 "defaults": { "xtype": "textfield" }
};

components['Form2'] = { xtype: 'form', "items": [
 { "name": "Date", "allowBlank": false, "fieldLabel": "Date", "xtype": "datefield" },
 { "name": "Time", "allowBlank": true, "fieldLabel": "Time", "xtype": "timefield"}],
 "defaults": { "xtype": "textfield" }
}

Answer 1

你的问题在这里：

var selectNode = function(node) {

    node.select();
    node = node.attributes;
    var newpanel = components[node.component].create();
    var cp = Ext.ComponentMgr.get('center_panel');
    cp.setTitle(node.text, node.icon);

    newpanel.hideMode = 'visibility';
    newpanel.hide();
    cp.removeAll();
    cp.add(newpanel);
    cp.doLayout();
    newpanel.show();
};

这里：

create: function() { return this; } 

cp.removeAll() 实际上会破坏所有组件。因此，当调用 create 时，没有 this 可返回，因此不会显示任何内容。视口组件会自动销毁任何被移除的东西，并且面板继承了这个功能。您可以将 autoDestory 设置为 false，或者在 create 中执行新操作。