如何在中心对齐网格面板

我将Ext JS网格面板放置在一个iFrame中。有谁知道我怎么能把它放在iFrame的中心。如何在中心对齐网格面板

目前，它看起来像这样 - Currently It look like this

我希望它是这样的 - I want it to be like this

2011-07-04 Ajan

您的IFrame可以使用边界布局的内容以上或没有布局，像这样：

var viewPort = new Ext.Viewport({ 
    renderTo:'body', 
    width: 400, 
    height: 400, 
    items:[new Ext.Panel({ 
     title: 'hi', 
     width: 200, 
     height: 200, 
     style: 'margin:0 auto;margin-top:100px;' 
    })]

}）;

来源

2011-07-04 12:10:21 Skym

谢谢Skym。还有一个问题：http://stackoverflow.com/questions/6594067/align-components-in-the-center-in-a-panel-ext-js – Ajan

喜欢的东西

grid: 
    region: center; 

panel: 
    layout: border; 
    css: "padding: 40px"

来源

2011-07-04 11:47:01 TheHorse

在examples site有一个这样的例子，你可能想看看。

layout:'ux.center', 
items: { 
    title: 'Centered Panel', 
    widthRatio: 0.75, 
    html: 'Some content' 
}

来源

2011-07-04 12:15:06 hpavc

显然这有副作用http：//www.sencha。？COM /论坛/ showthread.php 65064-解决 - !!! - ux.center - 不工作 –

的另一种方式，不优雅，是垂直框中，然后HBox中布局的cludge但纯ExtJS的和不依赖于UX：

Ext.create('Ext.container.Viewport',{ 
    style: 'background-color: white;', 

    layout: { 
     type: 'vbox', 
     align : 'stretch', 
     pack : 'start', 
    }, 
    items: [{ 
     flex: 1, 
     border: false 
    },{ 
     height: 200, 
     border: false, 
     layout: { 
      type: 'hbox', 
      pack: 'start', 
      align: 'stretch' 
     }, 
     items: [{ 
      flex: 1, 
      border: false 
     },{ 
      html:'Centered Panel', 
      width: 400 
     },{ 
      flex: 1, 
      border: false 
     }] 
    },{ 
     flex: 1, 
     border: false 
    }] 

    //items: [login_panel], 

});

来源

2012-09-03 12:26:36 Lloyd

简单地使用：

this.center()

这里的“this”是你想放在中心的对象（比方说网格）。

来源

2013-12-31 14:00:55 LeoSarena

如何在中心对齐网格面板

回答

相关问题