I have a 2x2 button grid. Now I would like to squeeze the buttons 200x200, put each in the container as a place holder, then in the center each button in the corresponding container.
In my image, I only reduced the top two buttons so you can see the spacing on the page. How can I go from the first image to the second image that was Photoshop'ed?
Purpose: (in fact, all 4 centered buttons are 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);
}
});
: 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>