Task #11096

ExtJS Button styling

Added by Steffen Gebert over 2 years ago. Updated over 2 years ago.

Status:Accepted Start date:2010-11-26
Priority:Should have Due date:
Assignee:Ralf Brändli % Done:

0%
Category:-
Target version:-
Votes: 0

Description

The styling for ExtJS buttons is not complete, yet.

The attached patch does already part of the job, however I think our button or sprite image CSS causes side-effects with the way ExtJS renders buttons with icons (they are not shown).

Attached T3X file can be imported as an Extension into TYPO3 and brings a backend module "ExtJS demo", which shows many ExJS controls. Please also check the Recylcler module.

16029.diff - Partial patch (2.6 kB) Steffen Gebert, 2010-11-26 16:18

T3X_demo_extjs_be.t3x - ExtJS Demo Extension (20.5 kB) Steffen Gebert, 2010-11-26 16:18

16029-v2.diff (2.6 kB) Ralf Brändli, 2010-12-03 11:33

button-states.png (5.2 kB) Steffen Gebert, 2010-12-26 23:58

16029-v3.diff (3.1 kB) Ralf Brändli, 2011-01-17 16:33

mouseover.png (60.3 kB) Steffen Gebert, 2011-01-18 00:09

mouseover2.png (26.4 kB) Steffen Gebert, 2011-01-18 00:09

History

#1
Updated by Ralf Brändli over 2 years ago

  • Assignee set to Steffen Gebert

Hi Steffen

I checked your demo Extension.
I saw you have defined an icon class "x-icon-btn-ok" for the submit button.
And this icon Class is not defined in the "typo3/sysext/t3skin/extjs/xtheme-t3skin.css" file.
To display a Icon in the submit button you just need to define the "x-icon-btn-ok".

e.q.

.x-icon-btn-ok {
background-image:url('ok.gif');
}

I don't know which icon you will display.
Please tell me where I found the icon set then I will made the chances in the "xtheme-t3skin.css"

#2
Updated by Ralf Brändli over 2 years ago

  • Status changed from New to Needs Feedback

#3
Updated by Steffen Gebert over 2 years ago

Umm.. okay.. so there's never an icon defined? The demo extension just shows the offical ExtJS demo, provided by sencha.

So.. dunno.. seems like I have to check again, which was the missing thing.

#4
Updated by Ralf Brändli over 2 years ago

  • File 16029-v2.diff added
  • Assignee changed from Steffen Gebert to Ralf Brändli

The problem with hidden icon in ext-js button by mouseover should be solved with this patch

#5
Updated by Susanne Moog over 2 years ago

Just a sidenote: The official sencha demo has no icons: http://dev.sencha.com/deploy/dev/examples/themes/index.html

#6
Updated by Steffen Gebert over 2 years ago

Hi Ralf,

I'm very sorry for the delay..

I've found an issue with normal ExtJS buttons, like they are used in modal dialogs

The button has like two hover states: One over the background and one over the inner text container.
Could you please have a look again?

You can use Ext.MessageBox.alert('foo', 'bar'); in Firebug console to create a modal dialog.

Thanks!
Steffen

#7
Updated by Steffen Gebert over 2 years ago

#8
Updated by Steffen Gebert over 2 years ago

  • Status changed from Needs Feedback to Accepted

#9
Updated by Ralf Brändli over 2 years ago

#10
Updated by Steffen Gebert over 2 years ago

Hi Ralf,

thanks for your work - unfortunately two more things.

First one very related to the thing you fixed today: The border style has also to be removed, when <button> is inside ExtJS

The second one: The icon appears on hover. I guess that's the thing, when I previously gave up. We mustn't unset the the background-image (which you did today), as then the background-image of the ExtJS button gets also removed. Can you have a look again, please!

#11
Updated by Steffen Gebert over 2 years ago

That's in the Settings tab of the Extension Manager.

Also available in: Atom PDF