PDA

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



johnconvoy
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?
Thanks

arthurakay
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.

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