如何在中心显示图像 - extjs 4

Question

win = Ext.create('widget.window', {
                title: 'View Image',
                closable: true,
                closeAction: 'hide',
                width: 600,
                minWidth: 350,
                height: 550,
                layout: {
                    type: 'border',
                    padding: 5
                        },
                items:[
                        listView, 
                    {                           
                    region: 'center',
                    //xtype: 'tabpanel',
                    minheight: 350,
                    items: [{
                        //title: 'Bogus Tab',
                        xtype : 'image',
                        id : 'displayimage',
                        width: 320,
                        height: 240,
                            }]
                    },
                    {
                    region: 'north',
                    margin : "5 0 5 0",
                    //xtype: 'tabpanel',
                    minheight: 350,
                    items: [dr]
                    }]

            });

问题

如何在窗口中心对齐displayimage？我试过align : 'center'，但是没有用。请帮助这个愚蠢的问题，非常感谢你！ 有任何想法，除了使用保证金或填充或没有。这种方法不好

最新更新

var Printtoolbar = Ext.create('Ext.toolbar.Toolbar',{
        items:[
        {text: 'Print',
        id: 'btnPrint',
        tooltip: 'Print This Image !',
        iconCls: 'print'
        }
        ]
    })
    var dr = Ext.create('Ext.FormPanel', {
        width:650,
        bodyPadding: '5px 5px 0',
        frame: true,
        layout: {
            type: 'vbox'
        },
        items: [{
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        //align: 'stretch',
                        padding:'0 0 10 0'
                    },
                    defaults: {
                        flex: 1
                    },
                        items:[startdt,enddt]
                    },
                    {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'center',
                        padding:'0 0 10 0'
                            },//layout
                    defaults: {
                        flex: 1
                             },//default
                        items:[cmbVehicle,{
                            //able to add 1 more items beside combobox
                            }]//items
                    },//container
                    {
                            xtype: 'button',
                            id : 'btnShowImage',
                            text : 'Show Image On List',
                            scale   : 'large',
                            width : 200,
                            margin : '0 0 0 180',   
                    }
                ]
    });

var listView = Ext.create('Ext.grid.Panel', {
        region: 'west',
        id : 'imagelist',
        title: 'Select Image',
        width: 200,
        split: true,
        collapsible: true,
        floatable: false,
        title:'Select Image',
        store: ImgStore,
        multiSelect: false,
        viewConfig: {
            emptyText: 'No images to display'
        },

        columns: [
            {
            text: 'Date Time Uploaded',
            //xtype: 'datecolumn',
            //format: 'Y-m-d H:i:s',
            flex: 65,
            width: 100,
            dataIndex: 'PicUploadedDateTime'
        }]
    });
win = Ext.create('widget.window', {
            title: 'View Image',
            closable: true,
            style:{
                            'display': 'table-cell',
                            'vertical-align': 'middle'
                        },
            closeAction: 'hide',
            width: 600,
            minWidth: 350,
            height: 550,
            layout: {
                type: 'border',
                padding: 5
                    },
            items:[
                    listView, 
                {                           
                region: 'center',

                //xtype: 'tabpanel',
                minheight: 350,
                items: [Printtoolbar,{
                    //title: 'Bogus Tab',
                    xtype : 'image',
                    id : 'displayimage',
                    style: {
                                'display': 'block',
                                'margin': 'auto'
                            },
                    listeners: {
                        'render': function(img) {
                            img.up().setBodyStyle({
                                'display': 'table-cell',
                                'vertical-align': 'middle'
                                                });
                                                }
                                 },
                    width: 320,
                    height: 240,
                        }]
                },
                {
                region: 'north',
                margin : "5 0 5 0",
                //xtype: 'tabpanel',
                minheight: 350,
                items: [dr]
                }]

        });

Answer 1

只需配置image＆amp;的'style'属性即可面板。 图像：

{
    xtype : 'image',
    id : 'displayimage',
    width: 320,
    height: 240,
    style: {
        'display': 'block',
        'margin': 'auto'
    }
}

面板：

style:{
    'display': 'table-cell',
    'vertical-align': 'middle'
}

您还可以在图像的“渲染”侦听器中设置面板样式：

Ext.getCmp('displayimage').on({
    'render': function(img) {
        img.up().setBodyStyle({
            'display': 'table-cell',
            'vertical-align': 'middle'
        });
     }
});

Screenshot

Answer 2

pack:'center'怎么样？

请参阅：http://dev.sencha.com/deploy/ext-3.3.1/examples/layout/hbox.html

Answer 3

至少在ExtJs 4.2.x中有一个问题，所以要使用相应的布局在容器中垂直和水平居中，您可以尝试：

layout: {
    type: 'vbox',
    align: 'center',
    pack: 'center',
},

或：

layout: {
    type: 'hbox',
    align: 'middle',
    pack: 'center',
},