CODEWITHSUNDEEP
javascriptqooxdoo
lorefnon
lorefnon

Reputation: 13095

Qooxdoo : styling individual widgets

What is the most convenient way to apply some custom styling to an individual widget element that does not confirm to the default styling of the theme. I am still confused with the usage of decorators . How does one apply multiple decorators eg. for border properties and background to a widget element.

I have tried using custom decorators eg. : 


        var titleBar = new qx.ui.container.Composite();
        titleBar.set({
            decorator : qx.ui.decoration.MBackgroundImage,
                        style : {
                backgroundImage : '/images/tbar.png'
                        }
        });

But I recieve an error :

Error in property decorator of class qx.ui.container.Composite in method setDecorator with incoming value '[Mixin qx.ui.decoration.MBackgroundImage]': Is invalid!

Upvotes: 4

Views: 1585

Answers (2)

Christian Hagendorn
Christian Hagendorn

Reputation: 559

You should use the decoration Mixins only when you define docorations with "qx.Theme.define".

I think a better way to define custom styles is to define a new appearance key and use this key for your widget instead.

    var titleBar = new qx.ui.container.Composite();
    titleBar.setAppearance("myApperanceKey");

Upvotes: 2

ThomasH
ThomasH

Reputation: 23496

You have to instantiate a proper decorator, not one of the decorator mixins. E.g. in your case something like this should work:

    var titleBar = new qx.ui.container.Composite();
    var myBackground = new qx.ui.decoration.Background();
    myBackground.setBackgroundImage("/images/tbar.png");
    titleBar.set({
        decorator : myBackground
    });

Upvotes: 2

Related Questions