PDA

View Full Version : How to style dynamic tab FormPanel?



KRavEN
4 May 2007, 4:38 AM
I'm using acronan's extend to put a a form into a dynamic panel.


var FormPanel = function(formObject, config) {
var config = config || {};
FormPanel.superclass.constructor.call(this, Ext.id(), Ext.apply({autoCreate: true}, config));
formObject.render(this.getId());
};
Ext.extend(FormPanel, Ext.ContentPanel);

I have a single panel layout loaded into a dialog box that I load the forms into tabs on. The initial panel is a gridpanel.

I load the form into a new tab from a grid cell doubleclick event like this:


panel = new FormPanel(form,
{title: requestId, closable:true});
layout.add('center', panel);

Everything works great.

My only problem is I can't figure out how to do any styling changes to the dynamic tab panel the form is loaded into. As it is now the edges of the form field boxes are right up against the left side of the panel. I need to at least be able to set a margin or something to try to center the content.

KRavEN
6 Jul 2007, 6:08 AM
Well, I actually went back to this after not worrying about it for a long time and I guess my Ext skills must have gotten better because I figured it out pretty quickly. To set the style on the FormPanel container get the element and use setStyle. Here's mine for setting the margins for the example above:


Ext.get(panel.el.dom.parentNode.id).setStyle('margin', '10px 0px 0px 10px');