在开始之前,我知道如何使用cls自定义ExtJS css,但我在某些方面遇到了一些困难
这是我的代码:
{
region: 'south',
height: 70,
layout:
{
type: 'hbox',
align: 'center',
pack: 'center',
xtype: 'container',
cls: 'testbackground',
},
border: false,
items: [
{
xtype: 'button',
cls: 'testbackground',
scale: 'large',
width: 200,
text: "Consulter",
margins: '15 5 5 5',
},
{
xtype: 'button',
scale: 'large',
text: "Télécharger",
width: 200,
margins: '15 5 5 5',
},
]
},
他是我的css
.testbackground
{
background: red;
}
当我测试时,背景按钮是红色的,没关系。但不是该地区的一个。 我想要的是改变容器的背景颜色,而不仅仅是按钮。 我不能让它发挥作用。 :)
答案 0 :(得分:0)
您在xtype
配置中有cls
和layout
的配置,这是无效的。将它们移动到南区配置的根目录,它将起作用。
以下是一个实例:https://fiddle.sencha.com/#fiddle/269
还有一些工作代码:
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Container', {
height: 500,
width: 500,
layout: 'border',
items: [
{
region: 'center',
html: 'I am center'
},
{
region: 'south',
height: 70,
xtype: 'container',
cls: 'test',
layout: {
type: 'hbox',
align: 'center',
pack: 'center'
},
border: false,
items: [
{
xtype: 'button',
cls: 'testbackground',
scale: 'large',
width: 200,
text: "Consulter",
margins: '15 5 5 5',
},
{
xtype: 'button',
scale: 'large',
text: "Télécharger",
width: 200,
margins: '15 5 5 5',
},
]
}
],
renderTo: Ext.getBody()
})
}
});