私は2x2のボタングリッドを持っています。ここで、ボタンを 200x200 に縮小し、それぞれをスペース プレース ホルダーとしてコンテナーに配置し、各ボタンをそれぞれのコンテナーの中央に配置します。
私の画像では、上の 2 つのボタンのみを縮小して、ページ上の間隔を確認できるようにしています。最初の画像から Photoshop で編集された 2 番目の画像に移動するにはどうすればよいですか?
目標: (実際には、中央にある 4 つのボタンすべてが目標です)
ファイル: app.js
Ext.application({
起動: 関数() {
var view = Ext.create('Ext.Container', {
レイアウト： {
タイプ: 'vbox'
}、
項目: [
{
xtype: 'コンテナ',
レイアウト: 'hbox',
フレックス: 1,
アイテム:[
{
xtype: 'コンテナ',
レイアウト: 'hbox',
フレックス: 1,
アイテム:[
{
xtype:'ボタン',
テキスト: 'ホーム',
ui: '平野',
スタイル: '背景色: #c9c9c9',
高さ: 200,
幅: 200
}
]
}、
{
xtype: 'コンテナ',
レイアウト: 'hbox',
フレックス: 1,
アイテム:[
{
xtype:'ボタン',
テキスト: 'ニュース',
ui: '平野',
スタイル: '背景色: #b9b9cb',
高さ: 200,
幅: 200
}
]
}
]
}、
{
xtype: 'コンテナ',
レイアウト: 'hbox',
フレックス: 1,
アイテム:[
{
xtype:'ボタン',
テキスト: 'メール',
ui: '平野',
スタイル: '背景色: #a9c9c9',
フレックス: 1
}、
{
xtype:'ボタン',
テキスト: '検索',
ui: '検索',
スタイル: '背景色: #c9c9c9',
フレックス: 1
}
]
}
]
});
Ext.Viewport.add(ビュー);
}
});
ファイル: index.html
<!doctype html>
<html manifest="" lang="en-US">
<頭>
<メタ文字セット="UTF-8">
<title>煎茶</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>
</html>