自定义 ExtJS CSS - 一些困难答案

【问题标题】：Customizing ExtJS CSS - some difficulties自定义 ExtJS CSS - 一些困难
【发布时间】：2013-12-13 17:07:05
【问题描述】：

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

我测试的时候，背景按钮是红色的，没关系。但不是该地区的。我想要的是改变容器的背景颜色，而不仅仅是按钮。我不能让它工作。 :)

【问题讨论】：

标签： css extjs extjs4 customization

【解决方案1】：

layout 配置中有 xtype 和 cls 的配置，这是无效的。将它们移动到 south region 配置的根目录，它就会起作用。

这是一个活生生的例子：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()
        })
    }
});

【讨论】：