View Full Version : How to modify TabPanel buttons

9 Feb 2011, 9:23 AM
I built a simple mobi site by starting with the tabs example. My site works great, but I need to alter the CSS for the buttons because my right-most button is clipped a little on an iphone. I want to slightly reduce margins or padding. I also would like to alter colors.

I have not been able to find the proper way to do this. After doing some dom inspecting, it is unclear what styles I need to override. I use the dom inspector in Safari and I see a bunch of possibilities for styles that I can modify: x-panel-body, x-tabpanel, x-dcoked... I have tried overriding these with no effect. I'm shooting in the dark here.

Moreover, the sencha touch css is minified. Even sencha-touch-debug.css is minified, so I can't easily read it and figure out the structure. In keeping with the debug version of the js library, I assumed it would be readable. Maybe I need to look at the tabpanel structure in desktop extjs? But I shouldn't have to do this.

And the API docs are missing many things related to touch, so it is hard to figure some of this out.

Where is a good place to look to figure out how the styling of tab panels and buttons work?

BTW I've been using extjs for 4 years or so and love it!