Question

有人能告诉我为什么我的边界：南部地区有这么小的宽度？我希望它能够拉伸整个屏幕的底部。我试图让我的代码尽可能基本，所以我不明白为什么fieldLabel被压扁了。

Ext.define('ExtApplication4.view.main.Main', {
extend: 'Ext.container.Container',
xtype: 'app-main',

requires: [
    'Ext.plugin.Viewport',
    'Ext.window.MessageBox',
    'ExtApplication4.view.main.MainController',
    'ExtApplication4.view.main.MainModel',
    'ExtApplication4.view.main.Header',
    'ExtApplication4.view.main.Footer',
    'ExtApplication4.view.portalRealtime.PortalRealtime',
    'ExtApplication4.view.settings.settings',
    'ExtApplication4.view.menu.Menu',
    'ExtApplication4.model.MenuListModel',
    'ExtApplication4.model.ClientListModel'
],

controller: 'main',
viewModel: 'main',
plugins: 'viewport',   

layout: {
    type: 'border',
    align: 'stretch'
},

items: [{
    region: 'center',
    id: 'centerID',
    layout: 'card',
    activeItem: 0,
    items: [{
        xtype: 'app-portalRealtime'
    }]
}, {
    xtype: 'appheader',
    region: 'north',
    title: 'north',
    style: 'background-color: #363434;'
}, {
    xtype: 'appfooter',
    region: 'south'
    //title: 'south'
    //style: 'background-color: #363434;'

    //title: 'Footer',
    //region: 'south',
    //xtype: 'container',
    //frame: true,
    //height: 100,
    //minHeight: 75,
    //maxHeight: 150,
    //html: '<p>Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com</p>',
    //items: [
    //{
    //    layout: {
    //        type: 'hbox'
    //    },
    //    anchor: '100%',
    //    defaults: {
    //        xtype: 'displayfield',
    //        width: 200
    //    },
    //    items:[
    //        {
    //            //xtype: 'displayfield',
    //            fieldLabel: 'hello user'
    //        },
    //        {
    //            //xtype: 'displayfield',
    //            fieldLabel: 'goodbye user'
    //        }
    //    ]
    //}
    //]
}, {
    region: 'west',
    split: true,
    collapsible: true,
    title: 'Menu',        
    xtype: 'app-menu'
}]
});

下面的

是页脚

Ext.define('ExtApplication4.view.main.Footer', {
//extend: 'Ext.panel.Panel',
extend: 'Ext.container.Container',
xtype: 'appfooter',

requires: ['Ext.layout.container.Fit'],

//html: '<p>Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com</p>'

height: 30,
//width: '100%',

layout: {
    type: 'hbox'
},

items: [
    {
        xtype: 'displayfield',
        fieldLabel: 'Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com'
        //cls: 'myLabelCSSFooter'
    },
    //{
    //    xtype: 'tbspacer',
    //    flex: 1
    //},
    {
        xtype: 'displayfield',
        fieldLabel: 'PrelimData:',
        value: '6:00 AM'
        //cls: 'myLabelCSSFooter',
        //margin: '0 10px 0 0'
    },
    {
        xtype: 'displayfield',
        fieldLabel: 'PrelimData:',
        value: '6:00 AM'
        //cls: 'myLabelCSSFooter',
        //margin: '0 10px 0 0'
    }
]

图片

Answer 1

试试这个：

layout: {
    type: 'border',
    align:'stretch'
},

和app页脚：

},{
region: 'south',
xtype:'container',
height: 25,
padding: '5 0 0 0',
frame: true,
style: 'border-top: 1px solid #363434;',
html: '<div style="text-align:center; font-size:10px;"> 'Copyright - xxxxxxx xxxxxx - http://www.xxxxxxxxxservice.com',</div>'
},{

<强>编辑：

按如下方式组织可能很有用：

Ext.define('YourApp.view.main.Main', {
extend: 'Ext.container.Viewport',
requires: [
    'RA.view.main.MainController',
    'RA.view.main.MainModel',
    'RA.view.west.MainMenuPanel',
    'RA.view.center.MainCenterPanel',
    'RA.view.footer.Footer',
    'RA.view.header.headerContent'
],

xtype: 'app-main',

controller: 'main',
viewModel: {
    type: 'main'
},

layout: {
    type: 'border',
    align:'stretch'
},

items: [{
    region: 'south',
    xtype: 'appfooter'
    },{
    region: 'north',
    xtype: 'headercontent'
    },{
    region: 'west',
    xtype: 'mainmenupanel'
    },{
    region: 'center',
    xtype: 'maincenterpanel'
}]
});

在app footer classe中使用：

requires : ['Ext.layout.container.Fit'],

看看这个小提琴：

https://fiddle.sencha.com/#fiddle/1hki

Extjs边境地区：南---宽度太小

1 个答案: