{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 爷的心禁止访问 的问题《Creating a 2x2 Button Grid with Centered Buttons?》','https://www.manongdao.com/q-1125772.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a 2x2 button grid. Now I'd like to shrink the buttons to 200x200, place each in a container as a space place holder, then center each button in its respective container.
In my image, I've only shrunk the two top buttons so you can see the spacing on the page. How can I go from the first image to the second image, which was Photoshop'ed?
The goal: (actually, all 4 centered buttons is the goal)
File: app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Home',
ui: 'plain',
style: 'background-color: #c9c9c9',
height: 200,
width: 200
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'News',
ui: 'plain',
style: 'background-color: #b9b9cb',
height: 200,
width: 200
}
]
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
text: 'Mail',
ui: 'plain',
style: 'background-color: #a9c9c9',
flex: 1
},
{
xtype:'button',
text: 'Search',
ui: 'Search',
style: 'background-color: #c9c9c9',
flex: 1
}
]
}
]
});
Ext.Viewport.add(view);
}
});
File: index.html
<!doctype html>
<html manifest="" lang="en-US">
<head>
<meta charset="UTF-8">
<title>Sencha</title>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript"
src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
<body>
</body>
</html>
Simply add
centered:trueto the configuration of all your buttons.Good luck.
P/S: that config actually set your component to the center (horizontally & vertically) of its parent component.