我发现这个 StackOverflow问题 是我下一个项目的基础。
对于每个“选项”段按钮，我想显示一个不同的 HTML 页面。我已经更改了 SegView 类来实现这一点。但是，现在我想设置我的左右边距以提供 10% 的差距。换句话说，我的内容将集中在中间的 80%。
是否可以简单地将我的容器配置为具有边距，以便我的内容被卡在边界上？
这是另一个 StackOverFlow问题中修改后的 SegView 类：
Ext.define('SenchaFiddle.view.SegView', {
extend: 'Ext.Container',
xtype: 'seg-view',
config: {
layout: 'fit',
items: [
{
layout: 'vbox',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
layout:{pack:'center'},
items: [
{
text: 'Option 1',
pressed: true,
handler: function () {
console.log("Picked #1");
Ext.getCmp('card-container').setActiveItem(0);
}
},
{
text: 'Option 2',
handler: function () {
Ext.getCmp('card-container').setActiveItem(1);
}
},
{
text: 'Option 3',
handler: function () {
Ext.getCmp('card-container').setActiveItem(2);
}
}
]
},
{
xtype: 'container',
flex: 10,
id: 'card-container',
layout: {
type: 'card'
},
items: [
{
xtype: 'container',
style: 'background-color: #fff',
items: [
{
html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
"<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
'<p>Hello world</p>'].join("")
},
{
html: ['<h2 style="text-align: center;">Lorum ipsum</h2>',
"<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>",
'<p>Hello world</p>'].join("")
}
]
},
{
html: ['<p>Lorum ipsum</p>',
'<p>Page #2</p>'].join(""),
style: 'background-color: #666'
},
{
html: ['<p>Lorum ipsum</p>',
'<p>Page #3</p>'].join(""),
style: 'background-color: #333'
}
]
}
]
}
]
}
});