Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    8
    Vote Rating
    2
    SelzChi is on a distinguished road

      0  

    Default Unanswered: Migrate custom css from Ext GWT 2.x to Ext GWT 3.x

    Unanswered: Migrate custom css from Ext GWT 2.x to Ext GWT 3.x


    Hi,

    I'm trying to migrate our Ext GWT 2.x css-files to Ext GWT 3.x. For EXT GWT 2.x we customized the styles via a new theme css file. If possible we want to reuse this theme css file for customizing the styles in EXT GWT 3 as well.
    Now, with the Appearance Pattern I can't detect a possibility for an easy switch. Do I have to support every UI-Element that I want to customize (for example FieldLabel) with a corresponding Appearance Implementation (MyFieldLabelAppearance implements FieldLabel.FieldLabelAppearance)? If not, can you please give me a hint?


    Thanks in advance


    Selcuk

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,640
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    If you create a custom appearance for a widget, and want this to always be used by default, put lines like this in your module file, somewhere after the GXT inherits statements:

    Code:
      <replace-with class="my.package.client.theme.MyFieldLabelAppearance">    <when-type-is class="com.sencha.gxt.widget.core.client.form.FieldLabel.FieldLabelAppearance" />
      </replace-with>
    This will cause the compiler to automatically always use your theme instead of the defaults provided. If you have a library of custom themes or widgets used internally, you might make a whole set of appearances, as are in com.sencha.gxt.theme.base (the basics for making the standard GXT themes) and com.sencha.gxt.theme.blue (specific details for making the images and colors blue). It isn't required to inherit Base or Blue, but may be handy for some initial dom structure that already works.

    If you only want some instances to use, or want some to be different than others, then either your css could have some extra class name to switch between the two, or make one the default (with the replace-with rebind rule), and pass the other appearance into the others' constructor.

  3. #3
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    139
    Answers
    2
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    Colin, your answer seems to partially cover my (unanswered) question at Styling GXT 3 but I am still unsure how to apply it.

    Is there a tutorial somewhere how to make a theme? Or have we to just study the existing one(s) and find inspiration there?
    And do you know if there is a tutorial / example how to make special Appearance for a given component? Perhaps I missed such thing in the demo explorer or a plain old GWT tutorial if they can be applied to GXT components ("appearance" is a word a bit too generic for searches...).

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2012
    Posts
    8
    Vote Rating
    2
    SelzChi is on a distinguished road

      0  

    Default


    Quote Originally Posted by Colin Alworth View Post
    If you create a custom appearance for a widget, and want this to always be used by default, put lines like this in your module file, somewhere after the GXT inherits statements:

    Code:
      <replace-with class="my.package.client.theme.MyFieldLabelAppearance">    <when-type-is class="com.sencha.gxt.widget.core.client.form.FieldLabel.FieldLabelAppearance" />
      </replace-with>
    This will cause the compiler to automatically always use your theme instead of the defaults provided. If you have a library of custom themes or widgets used internally, you might make a whole set of appearances, as are in com.sencha.gxt.theme.base (the basics for making the standard GXT themes) and com.sencha.gxt.theme.blue (specific details for making the images and colors blue). It isn't required to inherit Base or Blue, but may be handy for some initial dom structure that already works.

    If you only want some instances to use, or want some to be different than others, then either your css could have some extra class name to switch between the two, or make one the default (with the replace-with rebind rule), and pass the other appearance into the others' constructor.

    Hi Colin,
    thanks for your response!
    As I said before with Ext GWT 2 we currently have several themes. Each theme is implemented by a specific css file which is based on the styles defined in the gxt-all.css. So our application is styled completely different like the blue/grey theme provided as Ext GWT default.
    But now a lot of modules/widgets in Ext GWT 3.x have their own css-files (I found somewhat about 100 css files).
    Therefore my crucial question is: Can we preserve our custom-css-files that are based on gxt-all.css, or have we to
    revise our whole css-files to the new Ext GWT css-structure? As our themes are completely different from the blue theme, this would mean that we have to override about 100 css-file ourselves - by appling a new appearance (as you demonstrated in the code snippet above).
    Regards
    Selcuk

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar