title: how to display image on center - extjs 4
body: <pre><code>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]
                      }]
  
              });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/FvKew.jpg" alt="enter image description here"></p>
  
  <h2>QUESTION</h2>
  
  <p>how to align <code>displayimage</code> on center of window? i have tried <code>align : 'center'</code>,but doesn't work.please help this dumb question,thanks you very much!<br>
  have any idea except using margin or padding or not.this method are not good</p>
  
  <h2>LATEST UPDATE</h2>
  
  <pre><code>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]
                  }]
  
          });
  </code></pre>