1. #1
    Sencha User borisperezg's Avatar
    Join Date
    May 2010
    Posts
    22
    Vote Rating
    0
    borisperezg is on a distinguished road

      0  

    Default Answered: TextField Style

    Answered: TextField Style


    Hi everyone.

    I'm here because I'm starting to use GXT 3.0. However, I have a problem. I wanna use a custom style for my TextField component, but I cann't find any way to do it.

    I used:
    textField.setStyleName("")
    textField.addStyleName("")
    textField.setStylePrimaryName("")

    and nothing worked.

    Also, I read this blog http://neiliscoding.blogspot.com/201...ustomised.html but I couldn't find where to change the style for my textfield.

    Also, I removed the reset.css style in my html and included the clean.css style in my html, after that I changed the .gwt-TextBox property, but again, noting happened...

    I'm really mad about this.

    Is there anyone who can help me?

    Thanks a lot.

    ---
    Boris Pérez
    ----------------------------------
    Boris Pérez
    Univ. de los Andes

  2. I'm not sure you can achieve this with just a new style like that - I think you may need a whole new appearance implementation. Neil's blog post does a pretty good job of covering what you need to do for that - by building a replace-with rule you can even make this affect every text field in your app!

    As you've noticed, there are multiple layers to build GXT TextFields - this has to do with how difficult it is to get consistent look and feel cross browser, through all drawing, positioning, etc operations that need to occur. I notice you are using border-radius as well as the webkit and mozilla prefixes - I'm sure you are aware this won't work in older versions of IE?

    The TextField's different layers take care of padding/margins/borders that you want to get rid of. Your styles are applying to the outer div (which is why you screenshot has rounded corners outside the textfield, not on the input itself. I modified your css slightly, and it seems to get most of the way there - but you're going to have to continue working to ensure it functions in all browsers, when resized, etc.
    Code:
    .login_input input {
      border: 1px solid #dfdfdf;
      display: block;
      height: 19px;
      font-family: Georgia, serif;
      font-size: 16px;
      padding: 3px;
      width: 850px;
      margin: 10px 22px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
    }


    This works by actually applying your styles to the
    input itself, following css rules, instead of just to the wrapper.

    Once again, I encourage you to try Neil's explanation of building a new appearance to modify more than just a single field in this way. Here's another few links that hopefully help to explain the purpose and execution of the appearance pattern.
    http://code.google.com/p/google-web-...arance_Pattern
    http://www.sencha.com/blog/migrating...wt-2-to-gxt-3/

  3. #2
    Ext GWT Premium Member icfantv's Avatar
    Join Date
    Sep 2011
    Location
    Superior, CO
    Posts
    411
    Answers
    20
    Vote Rating
    21
    icfantv will become famous soon enough icfantv will become famous soon enough

      0  

    Default


    The first thing to mention would be that I believe this takes in a CSS class name not raw styles (e.g. "font-weight: bold;"), i.e., if you had:

    Code:
    .myStyle {
      background-color: red;
    }
    You would call addStyleName("myStyle").

    Secondly, use a tool like Firebug to ensure that the class name is actually being set in the DOM on the block level element around the text field being rendered. I don't recall the exact structure GXT uses, but it's most likely to be a <div>.

    Thirdly, if the style name does appear, it's quite possible that properties are being overridden further down in the DOM tree. Firebug will tell you this as well, look for your styles and see if they are crossed out (strikethrough), i.e., w/ a line through them.

    Try this and let us know what happens and we'll proceed from there.

  4. #3
    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


    TextBox is a GWT widget, whereas TextField is a GXT one, so the styles that apply to TextBox aren't going to automatically change TextField or vice versa.

    Without reset.css, a variety of style problems are going to arise - you cannot simply replace GXT's reset.css with GWT's Clean theme - again, GWT styling doesnt do anything for GXT. The reset.css file isn't really optional for the default GXT Blue and Gray themes - without it, there are several bugs that will occur.

    Neil's blog post is more about how to switch appearances, or even to build your own - this is useful to totally reskin widgets or cells. Nowhere in that post does he use the three methods you are trying.

    That said, what are you trying to do with your style?
    Code:
     textField.setStyleName("")

    is going to remove the style on the root element, but won't remove all the styles on other elements in the widget

    Code:
     textField.addStyleName("")

    is going to do nothing - it is adding an empty css class name

    Code:
     textField.setStylePrimaryName("")

    is going
    to update the primary and dependent names in the widget - this isn't a feature that GXT 3 uses, in favor of following the Appearance pattern to allow widgets and cells to be totally rethemeable.

    If you want to add a new css class to a widget, addStyleName(String) is the simplest way to add it to the base of the widget:
    Code:
        TextField field = new TextField();
        field.setValue("asdf");
        field.addStyleName("testing");
        container.add(field);
    results roughly in this structure:
    Code:
    <div __gwtcellbasedwidgetimpldispatchingfocus="true"
              __gwtcellbasedwidgetimpldispatchingblur="true"
              id="x-widget-1"
              class="testing"
              style="width: 150px; position: relative;">
      <div class="GKJJX3KBFY" style="width:150px;">
        <input type="text" class="GKJJX3KBEY GKJJX3KBPX" 
                    style="width:142px;" 
                    value="asdf" 
                    id="x-widget-1-input" 
                    tabindex="0">
      </div>
    </div>
    So the tools seem to work to set up styles, but what are you trying to achieve? I'm sorry to hear you are frustrated, but we need more to work on to try to help you...

  5. #4
    Sencha User borisperezg's Avatar
    Join Date
    May 2010
    Posts
    22
    Vote Rating
    0
    borisperezg is on a distinguished road

      0  

    Default Let's see

    Let's see


    Thanks for your help.

    Ok... I have a css file with this:

    .login_input {
    border: 1px solid #dfdfdf;
    display: block;
    height: 19px;
    font-family: Georgia, serif;
    font-size: 16px;
    padding: 3px;
    width: 850px;
    margin: 10px 22px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    }

    I want a rounded-corners textfield, with soft lines.

    In my code, I setted this:

    tFBusqueda = new TextField();
    tFBusqueda.setStyleName("login_input");

    and then, I added to a ContentPanel.

    This is what I want:
    MyProblem.jpg

    Using Firebug in Chrome, I get this:

    MyProblem2.png

    And I look for that style (x-widget-2-input) but I dont find it.

    As you can see... I have no clue about this

    Thanks for your attention.
    ----------------------------------
    Boris Pérez
    Univ. de los Andes

  6. #5
    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


    I'm not sure you can achieve this with just a new style like that - I think you may need a whole new appearance implementation. Neil's blog post does a pretty good job of covering what you need to do for that - by building a replace-with rule you can even make this affect every text field in your app!

    As you've noticed, there are multiple layers to build GXT TextFields - this has to do with how difficult it is to get consistent look and feel cross browser, through all drawing, positioning, etc operations that need to occur. I notice you are using border-radius as well as the webkit and mozilla prefixes - I'm sure you are aware this won't work in older versions of IE?

    The TextField's different layers take care of padding/margins/borders that you want to get rid of. Your styles are applying to the outer div (which is why you screenshot has rounded corners outside the textfield, not on the input itself. I modified your css slightly, and it seems to get most of the way there - but you're going to have to continue working to ensure it functions in all browsers, when resized, etc.
    Code:
    .login_input input {
      border: 1px solid #dfdfdf;
      display: block;
      height: 19px;
      font-family: Georgia, serif;
      font-size: 16px;
      padding: 3px;
      width: 850px;
      margin: 10px 22px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-radius: 6px;
    }


    This works by actually applying your styles to the
    input itself, following css rules, instead of just to the wrapper.

    Once again, I encourage you to try Neil's explanation of building a new appearance to modify more than just a single field in this way. Here's another few links that hopefully help to explain the purpose and execution of the appearance pattern.
    http://code.google.com/p/google-web-...arance_Pattern
    http://www.sencha.com/blog/migrating...wt-2-to-gxt-3/

  7. #6
    Sencha User borisperezg's Avatar
    Join Date
    May 2010
    Posts
    22
    Vote Rating
    0
    borisperezg is on a distinguished road

      0  

    Default


    Thanks... that's work.

    I have to study in deep this topic about Appearance pattern.

    Again, thanks a lot.
    ----------------------------------
    Boris Pérez
    Univ. de los Andes

  8. #7
    Sencha User
    Join Date
    Jan 2011
    Location
    Lima, Peru
    Posts
    43
    Answers
    5
    Vote Rating
    4
    poseidonjm is on a distinguished road

      0  

    Default Set a Simple Style

    Set a Simple Style


    You can use getInputEl() to set simple style properties on input text field e.g.
    Code:
    public class UpperTextField extends TextField {	
    	
    	public UpperTextField(){
    		super();
    		getInputEl().getStyle().setTextTransform(TextTransform.UPPERCASE);
    	}
    
    
    	@Override
    	public String getValue() {
    		final String originalValue = super.getValue();
            return originalValue != null ? originalValue.toUpperCase() : null;
    	}
    }
    more http://stackoverflow.com/questions/3...style-from-gwt

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