问题
I took this code from another question and now I'm trying to get the four buttons to fill the entire window.
Nothing that I do seems to have an affect. The fullscreen: true option seems to always be ignored. What's the trick to know you need to adjust the layout so that it takes all the vertical space?
Ideally, I'd like this solution to work for a 3x3 button layout too.
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);
}
});
Standard index.html that uses Sencha Touch CDN.
<!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:
I've modified something to meet exactly what you need (3x3 buttons layout). Good luck! :)
P/S: I've removed handler functions to make the source code easier to catch.
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);
}
});
回答2:
Thiem Nguyen's answer might work for what you need but this will work for stretching the buttons across the screen.
view = Ext.create('Ext.Container', {
layout:'hbox',
items:[ {
xtype: 'container',
width:'50%',
layout: 'vbox',
items:[{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('top left')
}
},{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('top right')
}
}]
},{
xtype: 'container',
width:'50%',
layout: 'vbox',
items:[{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('bottom left')
}
},{
xtype:'button',
// ui: 'plain',
flex: 1,
handler:function(){
alert('bottom right')
}
}]
}]
});
来源：https://stackoverflow.com/questions/10112124/how-to-make-button-grid-resize-to-fit-screen