如何调整按钮网格大小以适应屏幕？ [英] How to make button grid resize to fit screen?
本文介绍了如何调整按钮网格大小以适应屏幕？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我从另一个问题中提取了这段代码，现在我正在尝试让这四个按钮填充整个窗口。
我所做的一切似乎都没有影响。fullscreen: true选项似乎总是被忽略。要知道需要调整布局以占据所有垂直空间的诀窍是什么？
理想情况下，我希望此解决方案也适用于3x3按钮布局。
app.js
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
// fullscreen: true,
layout: {
type: 'vbox',
flex: 1
},
items: [{
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'button',
height: '50%',
text: 'flat button',
ui: 'plain',
flex: 1,
handler: function() {
alert('top left')
}
}, {
xtype: 'button',
height: '50%',
//ui: 'plain',
flex: 1,
handler: function() {
alert('top right')
}
}]
}, {
xtype: 'container',
layout: 'hbox',
items: [{
xtype: 'button',
height: '50%',
//ui: 'plain',
flex: 1,
handler: function() {
alert('bottom left')
}
}, {
xtype: 'button',
//ui: 'plain',
height: '50%',
flex: 1,
handler: function() {
alert('bottom right')
}
}]
}]
});
Ext.Viewport.add(view);
}
});
使用Sencha Touch CDN的标准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>
推荐答案
我已经修改了一些内容以完全满足您的需要(3x3按钮布局)。祝你好运！：)
P/S：我已删除处理程序函数，以使源代码更易于捕获。
Ext.application({
launch: function() {
var view = Ext.create('Ext.Container', {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
},
{
xtype: 'container',
layout: 'hbox',
flex: 1,
items:[
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
},
{
xtype:'button',
ui: 'action',
flex: 1,
}
]
}
]
});
Ext.Viewport.add(view);
}
});
这篇关于如何调整按钮网格大小以适应屏幕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
