Question

我想将面板添加到tabPanel的一个标签中，我使用面板的边框布局，但是当我将面板添加到标签时，它无法填充它的父体。
面板代码：

var viewport = Ext.create('Ext.panel.Panel', {
layout: {
type: 'border',
padding: 5
},
defaults: {
split: true,
anchor:'100%'
},
id:'viewPort',
width:600,
height:600,
items: [{
region: 'west',
collapsible: true,
title: 'Starts at width 30%',
split: true,
width: '17%',
minWidth: 100,
minHeight: 140,
layout:{
type:'vbox',
align:'stretch'
},
items: [show,treePanel,propGrid]
},tabs]
});

作为面板父级的标签代码，当用户点击它时动态加载到它的面板：

var mainTabs = Ext.create('Ext.tab.Panel', {
layout: 'anchor',
id:'mtabs',
defaults: {
split: true,
anchor: '100%'
},
items: [{
title: 'Layout Window',
closeAction: 'hide',
layout: {
type: 'border',
padding: 5
},
//anchor: '100%',
width:600,
height:600,
listeners: {
    activate:function (tab) {

    }
},
items: [{
    region: 'west',
    collapsible: true,
    title: 'Starts at width 30%',
    split: true,
    width: '17%',
    minWidth: 100,
    minHeight: 140,
    layout:'vbox',
    items: [historyTreePanel,propGrid]
    },tabs]
},{
    title: 'History',
    //xtype:'panel',
    width:2000,
    height:1024,
    html: 'Please Wait...',
    id:'history-tab',
    layout:'fit',
    layout: 'hbox',
     default: {
     anchor:'100%'
     },
//iconCls: 'favorites',
//cls: 'card1',
listeners: {
    activate:function (tab) {
    if(!flag){
    flag = true;
        $.getScript("/FleetManagement/js/history/fleethistory.js", function(data, textStatus, jqxhr) {
            Ext.getCmp('history-tab').add(viewport);
        });
}
}
}
}],
renderTo : Ext.getBody()
});
});

上面带有id:'history-tab'的代码选项卡中的

是我提到的标签。我该如何解决这个问题？
Tab content

Answer 1

您的代码似乎缺少某些组件。您的标签应该有正确的布局。示例代码。 jsfiddle示例here。希望这有帮助

Ext.onReady(function() { var resultsPanel = Ext.create('Ext.Panel',{
        frame:false,
        border:false,
        collapsible:false,
    title:'tab main',
        layout:'border',
        items:[{
          region: 'center', 
          id:'centerPanel',
            title:'center',
          xtype:'panel',
          layout:'fit',
          border: true,
          items:[{id:'grid',xtype:'panel'}]

        },

               {
                 region: 'west',     
                 id:'westPanel',
                   title:'facets',
                 xtype:'panel',
                 width:'15%',
                 collapseMode: 'mini',
                 collapsible:true,
                 autoScroll: true,
                 border: false,
                 baseCls:'x-plain',
                 split: true ,
                 items:[{id:'facet',xtype:'panel'}]
               }
              ]
      }); var subtab = {  xtype:'tabpanel',
                      title:'moretabs',
                      activeTab: 0,//tabActive,
                      closable:true,
                      border:false,
                      id:'idd',
                items: [{border:false,layout: 'fit',cls: 'inner-tab-custom', autoShow:true, id:'sub1-',title:  'nested1',items:[resultsPanel]}]  };

var tabPanel = Ext.create('Ext.tab.Panel', {
      layout:'fit',
    height:200,
      msgDisplay: 'block',
      //deferredRender:false,
      border:false,
      items: [subtab]
      }).render(Ext.getBody());

});

带borderLayout的面板填充它的父体

1 个答案: