自定义ExtJS CSS - 一些困难

时间:2013-12-13 17:07:05

标签: css extjs extjs4 customization

在开始之前,我知道如何使用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;
}

当我测试时,背景按钮是红色的,没关系。但不是该地区的一个。 我想要的是改变容器的背景颜色,而不仅仅是按钮。 我不能让它发挥作用。 :)

1 个答案:

答案 0 :(得分:0)

您在xtype配置中有clslayout的配置,这是无效的。将它们移动到南区配置的根目录,它将起作用。

以下是一个实例: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()
        })
    }
});