1. #1
    Sencha User
    Join Date
    Jul 2009
    Posts
    12
    Vote Rating
    0
    aconn7 is on a distinguished road

      0  

    Default Unanswered: Suggestions for implementing field help in FormPanel?

    Unanswered: Suggestions for implementing field help in FormPanel?


    I would like to implement field help in FormPanel such that the user mouses over the field prompt label or an "i" info icon next to the field label. Ideally the help will display has a tooltip.

    The labels do not support tooltips and FormPanel does not natively support an additional icon when adding a field. If the icon could easily be added, then I could accomplish what I am interested in through an icon button.

    As an ultimate ideal, i would like to add a clickable link/button in the tooltip which would take the user to help editing facility. Can I add active components to ToolTip in manner similar to the HtmlContainer.add capability?

    Your suggestions greatly appreciated!

  2. #2
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Answers
    60
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    If you want to have an extra icon next to the label you should create a custom FormLayout here. The label is not linked to the FormPanel, but to the contained FormLayout.

    In the FormLayout you can change the markup to either use a QuickTip on the label, or you add an extra icon next to the label. Both can be done with changing the used template.

  3. #3
    Sencha User
    Join Date
    Jul 2009
    Posts
    12
    Vote Rating
    0
    aconn7 is on a distinguished road

      0  

    Default


    I experimented a little with this an got confused on a couple of points:

    1) In the FormLayout, I did find the getTemplate() markup used to render the field label. Is it just a matter of adding attributes qtip and qtipTitle? or Do I have a to create a QuickTip instance? If so, what component do i pass the constructor?

    2) If I use an icon, is it the same procedure: qtip and qtipTitle? And again, if a QuickTip constructor is called, what component to pass?

    3) How can I attach GWT/GXT code to the icon if the user clicks it?

    4) Is it possible to make active elements within the tooltip - such as an "edit this help" link?

    Thanks!

  4. #4
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    88
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    1) In the FormLayout, I did find the getTemplate() markup used to render the field label. Is it just a matter of adding attributes qtip and qtipTitle? or Do I have a to create a QuickTip instance? If so, what component do i pass the constructor?
    A QuickTip must be created at some level above the element which is to have the tooltip. If you plan on the entire form having tool tips, you may consider creating the QuickTip with the form or its parent as the constructor. QuickTip will then, as the javadocs should indicate, allow any child element of that component with a qtip attribute to have a tooltip.

    2) If I use an icon, is it the same procedure: qtip and qtipTitle? And again, if a QuickTip constructor is called, what component to pass?
    Same as above - some component which has the element in question (label or icon could be a div, img, label, etc) as a child.

    3) How can I attach GWT/GXT code to the icon if the user clicks it?
    I have not tried this, but QuickTip is a Widget and so can events sunk to it. Building a single QuickTip for the form means that you will have one handler for the form, and you will need to find a way to discover the which field is being displayed. (Note also that you could created one QuickTip per Field object, and that way build a Field-specific handler per each tip, but that would create many more widgets and would make for more code to write, and more handlers to attach. Acceptable for small forms perhaps, but not ideal.)

    4) Is it possible to make active elements within the tooltip - such as an "edit this help" link?
    If by 'link' you mean an external link, sure, just a <a href="...">link</a> would work, probably with a target attribute to open a new window. This would need to be encoded to go in the qtip property correctly. If you want more than that, you are starting to get beyond what a 'quick' tip can do for you. This is not to say that it wouldn't be possible, will require some investigation on your part into how QuickTip replaces its content, and how you could further adjust that.

Thread Participants: 2