ExtJS和CSS面板背景

Question

我是Sencha ExtJS和Css整體上的新手。 基本上，我的主面板中有3個子面板。 我想使用CSS將相同的背景顏色設置到主面板中的三個面板中。 我創建了一個.css文件，並將其鏈接到HTML。 CSS文件的內容為：

.x-panel.child-content-style {
background-image : url('TitleBackground.png');

}

我可以通過設置bodyStyle:{"background-image":"url('TitleBackground.png')"}配置來實現，而無需使用CSS。 它運行完美，但是我覺得可能有使用CSS更好的方法。

當我嘗試使用cls config屬性添加css時，沒有任何反應。 設置bodyCls屬性時，它將設置整個應用程序的背景，這不是我想要的。 我希望將背景更改為僅幾個面板。 我也嘗試過在bodyStyle配置中指定css元素名稱來代替內聯，這很不愉快。

這是我的子面板：

{ xtype: 'panel', html: '<img src=\'appIcon.png\' style=\'width:52px;height:52px\'> &nbsp;', cls: 'child-content-style' },
                    { xtype: 'panel', html: '<h2 style=\'font-family:verdana\'>Toolkit v3.0</h2>', bodyStyle:{"background-image":"url('TitleBackground.png')"} },
                    { xtype: 'panel', html: '&nbsp;<img src=\'appIcon.png\' style=\'width:52px;height:52px\'>', bodyStyle:{"background-image":"url('TitleBackground.png')"} }

甚至有可能做到這一點，還是我應該把它弄得一團糟，把它放在行內？

謝謝

Answer 1

我相信您正在尋找的是bodyCls 。