javascript 如何在中心显示图像 - extjs 4
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14920869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to display image on center - extjs 4
提问by lp1051
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]
}]
});
QUESTION
问题
how to align displayimageon center of window? i have tried align : 'center',but doesn't work.please help this dumb question,thanks you very much!
have any idea except using margin or padding or not.this method are not good
如何displayimage在窗口中心对齐？我试过了align : 'center'，但不起作用。请帮助这个愚蠢的问题，非常感谢！
除了使用边距或填充之外还有其他想法。这种方法不好
LATEST UPDATE
最新更新
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]
}]
});
回答by Vlad
Just configure 'style' property of image & panel. Image:
只需配置图像和面板的“样式”属性。图片：
{
xtype : 'image',
id : 'displayimage',
width: 320,
height: 240,
style: {
'display': 'block',
'margin': 'auto'
}
}
Panel:
控制板：
style:{
'display': 'table-cell',
'vertical-align': 'middle'
}
You also can set panel style in 'render' listener of your image:
您还可以在图像的“渲染”侦听器中设置面板样式：
Ext.getCmp('displayimage').on({
'render': function(img) {
img.up().setBodyStyle({
'display': 'table-cell',
'vertical-align': 'middle'
});
}
});
回答by lp1051
There is a catch, at least in ExtJs 4.2.x, so to center both vertically and horizontally, in container using respective layouts, you can try either:
有一个问题，至少在 ExtJs 4.2.x 中，因此要在使用相应布局的容器中垂直和水平居中，您可以尝试：
layout: {
type: 'vbox',
align: 'center',
pack: 'center',
},
or:
或者：
layout: {
type: 'hbox',
align: 'middle',
pack: 'center',
},
回答by doniyor
what about pack:'center'?
怎么样pack:'center'？
see this: http://dev.sencha.com/deploy/ext-3.3.1/examples/layout/hbox.html
看到这个：http: //dev.sencha.com/deploy/ext-3.3.1/examples/layout/hbox.html
