View Full Version : How to dynamic change border color for region in Viewport

16 Feb 2011, 6:01 AM
I have a page with a Viewport with 3 regions (north,west and center). The users want's an indication of what region has focus. I want to make this indication by changing the border color for the region that has focus.

So, How to dynamic change border color for region in Viewport?

16 Feb 2011, 6:27 AM
You should probably be able to grab the Ext.Element for the region using the getEl() method.

var northRegion = new Ext.Panel({...});


var northRegionEl = northRegion.getEl(); //gives you an Ext.Element

The look at the API docs for Ext.Element
- http://dev.sencha.com/deploy/dev/docs/?class=Ext.Element

Use methods like addClass() or applyStyles() - and modify the border CSS.

I'm just shooting-from-the-hip here... you have have to massage the code a bit to figure out the correct CSS property.

Alternatively, you could use the Ext.Fx method:
- http://dev.sencha.com/deploy/dev/docs/?class=Ext.Fx

These methods are simply chained onto the Ext.Element we grabbed above.

16 Feb 2011, 6:52 AM
I used the panel.el.addClassOnFocus function.