CODEWITHSUNDEEP
javascriptajaxextjsextjs4
user2040602
user2040602

Reputation:

how to display image on center - extjs 4

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]
                    }]

            });

enter image description here

QUESTION

how to align displayimage on 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

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]
                }]

        });

Upvotes: 1

Views: 14201

Answers (3)

lp1051
lp1051

Reputation: 501

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:

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

or:

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

Upvotes: 1

Vlad
Vlad

Reputation: 3645

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'
        });
     }
});

Screenshot

Upvotes: 2

doniyor
doniyor

Reputation: 37846

what about pack:'center' ?

see this: http://dev.sencha.com/deploy/ext-3.3.1/examples/layout/hbox.html

Upvotes: 1

Related Questions