创建一个2x2按钮网格与中心按钮？
我有一个2x2的按钮网格。现在我想把按钮缩小到200x200，把每个按钮放在一个容器中作为一个空格，然后把每个按钮放在各自容器的中心。
在我的图片中，我只缩小了顶部的两个按钮，以便您可以看到页面上的间距。我怎样才能从第一张图片转到第二张图片，这是Photoshop制作的？
文件：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>
共有1个答案
只需将centered:true添加到所有按钮的配置中即可。
祝你好运。
P/S：该配置实际上将您的组件设置为中心（水平
-
本文向大家介绍javafx 创建一个按钮，包括了javafx 创建一个按钮的使用技巧和注意事项，需要的朋友参考一下 示例 创建aButton很简单： 这将创建一个新的Button，内部没有任何文本或图形。 如果要Button使用文本创建一个，只需使用带有Stringas参数的构造函数（用于设置textProperty的Button）： 如果您想创建一个Button内部带有图形或其他图形的Node，
-
pre { white-space: pre-wrap; } 分割按钮（Split Button）包含一个链接按钮（Link Button）和一个菜单（Menu）。当用户点击或者鼠标悬停在向下箭头区域，将会显示一个对应的菜单。本实例演示了如何创建和使用分割按钮（Split Button）。 我们创建一个分割按钮（Split Button）和一个链接按钮（Link Button）： <di
-
pre { white-space: pre-wrap; } 菜单按钮（Menu Button）包含一个按钮（button）和一个菜单（menu）组件，当点击或移动鼠标到按钮上，将显示一个对应的菜单。 为了定义一个菜单按钮（Menu Button），您应该定义一个链接按钮（Link Button）和一个菜单（menu），下面是一个实例： <div> <a href="#"
-
pre { white-space: pre-wrap; } 通常情况下，使用 <button> 元素来创建按钮，而链接按钮（Link Button）则是使用 <a> 元素来创建的。所以实际上一个链接按钮（Link Button）就是一个显示为按钮样式的 <a> 元素。 为了创建链接按钮（Link Button），所有您需要做的就是添加一个名为 'easyui-linkbutton' 的 clas
-
我正在用Java Swing编写一个简单的paint程序，但我遇到了一个创建颜色按钮网格的问题。我是通过在窗口顶部创建一个JPanel来实现的。这就是现在的样子 我以以下方式添加按钮：
-
本文向大家介绍qml 创建一个简单的按钮，包括了qml 创建一个简单的按钮的使用技巧和注意事项，需要的朋友参考一下 示例 您可以使用MouseArea组件轻松地在可单击按钮中转换每个组件。下面的代码显示一个360x360窗口，中间带有一个按钮和一个文本。按下按钮将更改文本：