View Full Version : FormPanel background color in a TabPanel?

13 Oct 2010, 10:00 AM
I'm creating a FormPanel as a tab.

What is the best way to have the FormPanel use the dialog background color (cyan) rather that the default TabPanel background color (white)? I like the contrast better on the dialogs.

Obviously, I know I could use bodyStyle and set the background-color attribute, but I was hoping there is a more elegant, theme-friendly way to do this.

13 Oct 2010, 10:56 AM

13 Oct 2010, 11:17 AM
Condor, that would help if I wanted to change the form's background color to "#DFE8F6" explicitly with a stylesheet.

But what I'd rather do is just have the TabPanel take on the normal background color for a plain FormPanel (#DFE8F6 using the defaul Ext JS theme) rather than the usual white. Preferably without stylesheet hacks so I can preserve the ability to easily use themes.

Here's a sample slice of my code:

// Meanwhile, inside the Viewport...
region: "center",
xtype: "tabpanel",
id: "maintabs",
activeTab: 0,
tabPosition: "top",
deferredRender: false,
defaults: { closable: false, autoScroll: true, border: false },
items: [
ProjectForm = new Ext.FormPanel({
id: "panelProjectForm",
formId: "ProjectForm",
title: localize_tab_projectform,
url: "loglist-ajax.aspx",
bodyStyle: "padding: 10px",
defaultType: "textfield",
items: [
{ xtype: "hidden", name: "guid", value: projectguid },
{ xtype: "hidden", name: "Command", value: "Save" },
{ fieldLabel: localize_project_formlabel_title, value: localize_project_formvalue_title, name: "title", allowBlank: false, anchor: "95%" },
{ fieldLabel: localize_project_formlabel_description, value: localize_project_formvalue_description, name: "description", allowBlank: true, anchor: "95%", xtype: "htmleditor" }
// ... More tabs defined here