Question

I have a formpanel and a div inside it with the class ‘x-panel-body’

How can I select that div and alter it’s style? I’ve tried using ext.select and setStyle but it tells me that the html has no setstyle method.

Thanks

edit: to add, that is the only form on the page. It also has html id: myform

Answer 1

You have several possibilities:

1. Using a CSS rule should probably be your first choice

   #myform .x-panel-body {
   background: red;
   }

2. Apply a bodyStyle config property when creating your panel. See API docs. (Or alternatively bodyCls). Note that this is a config property that is only evaluated once during the construction phase of the panel component and cannot be used to change the style at runtime.

   In case you need to change the style programmatically after the component has been created:

3. use setStyle but remember that this is a method of Ext.Element and not Ext.Component (or Ext.form.Panel)! You have to call it on the body member of your panel object.

   // fetch the body element of your form object which is of 
   // type Ext.Element and apply the style
   myForm.body.setStyle([property], [value]);