Question

我一直在尝试使用与此http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html类似的门户网站布局中的标签构建一个窗口。窗口，顶部栏，页脚，标签，组合框和图表显示正常，但是当我在窗口中放置标签时，它们不会显示。以下是我的代码

 //portal.js that is calling
Ext.define('Ext.app.Portal', {

extend: 'Ext.container.Viewport',

uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.RegHosts', 'Ext.app.ChartPortlet', 'Ext.app.RougeHosts'],

getTools: function(){
    return [{
        xtype: 'tool',
        type: 'gear',
        handler: function(e, target, panelHeader, tool){
            var portlet = panelHeader.ownerCt;
            portlet.setLoading('Working...');
            Ext.defer(function() {
                portlet.setLoading(false);
            }, 2000);
        }
    }];
},

initComponent: function(){
    var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';

    Ext.apply(this, {
        id: 'app-viewport',
        layout: {
            type: 'border',
            padding: '0 5 5 5' // pad the layout from the window edges
        },

        items: [{
            id: 'app-header-complete',
            xtype: 'box',
            region: 'north',
            height: 40,
            html: ''
        },{
            xtype: 'container',
            region: 'center',
            layout: 'border',
            items: [{
                id: 'app-portal',
                xtype: 'portalpanel',
                region: 'center',
                items: [{
                    id: 'col-1',
                    items: [{
                        id: 'regehosts',

                        title: 'Registered Hosts',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.RegeHosts'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                },{
                    id: 'col-2',
                    items: [{
                        id: 'rouge',
                        title: 'Rouge Hosts',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.Rouge'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                },
                {
                    id: 'col-3',
                    items: [{
                        id: 'devices',
                        title: 'Devices',
                        tools: this.getTools(),
                        items: Ext.create('Ext.app.Devices'),
                        listeners: {
                            'close': Ext.bind(this.onPortletClose, this)
                        }
                    }]
                }
                ]
            }]
        }]
    });
    this.callParent(arguments);
},

onPortletClose: function(portlet) {
    this.showMsg('"' + portlet.title + '" was removed');
},

showMsg: function(msg) {
    var el = Ext.get('app-msg'),
        msgId = Ext.id();

    this.msgId = msgId;
    el.update(msg).show();

    Ext.defer(this.clearMsg, 3000, this, [msgId]);
},

clearMsg: function(msgId) {
    if (msgId === this.msgId) {
        Ext.get('app-msg').hide();
    }
}
});













  // function contents that is called

 requires:["*"],



    ,initComponent:function()
     {Ext.apply(this,{layout: {
        type: 'fit'
     }
     ,width:550,height:420,items:
    [

     {xtype:"label",fieldLabel: text, name:'txt',text:text,    
       id:'devicesLabel',style:'width:300px;'},

 {
xtype:'tabpanel',
width: 400,
    height: 400,

    items: [{
    title: 'Foo'
    }, {
    title: 'Bar',
    tabConfig: {
        title: 'Custom Title',
        tooltip: 'A button tooltip'
    }
    }]

}



   ]


  });this.callParent(arguments)}});

Answer 1

我建议你阅读适合布局的文档，它不起作用的原因在第一行：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Fit

您需要使用其他类型的布局，例如，使它们并排显示，使用hbox。对于彼此，使用vbox。还有其他几种布局，您可以在布局浏览器示例中看到它们的示例。

extJS选项卡未显示在门户网站布局中

1 个答案: