0

我正在使用 ExtJs 组件创建布局，并且需要在运行时动态添加小部件。该代码将三个容器添加到视口、顶部、左侧和中心选项卡面板。选项卡面板还包含两个选项卡 (Ex.panel.Panel)，第二个选项卡包含一个html 编辑器。

代码：

Ext.onReady(function () {
 var vp = Ext.create("Ext.container.Viewport", {
     layout: 'border'
 });

 var top = Ext.create("Ext.container.Container", {
     renderTo: 'top',
     height: 70,
     region: 'north'
 });
 var left = Ext.create("Ext.panel.Panel", {
     renderTo: 'left',
     title: 'Menu',
     split: true,
     collapsible: true,
     width: 270,
     region: 'west'
 });
 var center = Ext.create("Ext.tab.Panel", {
     renderTo: 'center',
     region: 'center',
 });

 vp.add(top);
 vp.add(left);
 vp.add(center);

 var tab1 = Ext.create("Ext.panel.Panel", {
     renderTo: "tab1",
     layout: "fit",
     title: "Tab-1"
 });
 var tab2 = Ext.create("Ext.panel.Panel", {
     renderTo: "tab2",
     layout: "fit",
     title: "Tab-2: Editor"
 });

 center.add(tab1);
 center.add(tab2);

 var editor = Ext.create("Ext.form.HtmlEditor", {
     renderTo: "editor"
 });

 tab2.add(editor);

 //center.doLayout();
});

问题是编辑器没有显示在第二个选项卡中，而是显示在顶部。但是，当我单击第二个选项卡时，它会自动更正布局并在正确的位置显示 html 编辑器。但是 html 编辑器仍然不允许输入。

此外，我观察到文档不包含在运行时创建布局的示例，所有示例都演示了布局的设计时创建。

添加选项卡和 html 编辑器后，我还尝试了TabPanel.doLayout()方法，但它仍然不能纠正显示问题。如果有任何关于如何在 ExtJs 中动态添加组件的想法，请分享。

JS 小提琴 http://jsfiddle.net/uZGxS/

4

1 回答 1

0

我找到了选项卡问题的解决方案。在将新选项卡添加到选项卡面板时，如果我们将其设置为活动状态，则子组件将正确呈现。在这种情况下，现在 html 编辑器布局呈现并显示在正确的位置。

center.add(tab1);
center.setActiveTab(tab1);
center.add(tab2);
center.setActiveTab(tab2);

JSFIDDLE：http: //jsfiddle.net/uZGxS/1/

于 2013-10-13T18:59:23.763 回答