Results 1 to 6 of 6

Thread: how can i put picture for information between text and textfield

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default Answered: how can i put picture for information between text and textfield

    Hi,

    Is any one knows ,How can I put any picture between text and textfiled.

    like this question mark picture icon ,for getting information about text field


    questions.jpg

  2. That's just overnesting...

    Just need to insert the image tag into the label. You may want to check out Ext.form.Labelable and the labelableRenderTpl property

  3. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,790
    Answers
    583
    Vote Rating
    390
      0  

    Default

    Here are a couple of ways to do it, I'm sure there are more.

    Code:
    new Ext.form.field.Text({
        fieldLabel: 'Hello<img src="pic.png" />',
        labelSeparator: ''
    }),
    Code:
    var textField = new Ext.form.field.Text();
    
    new Ext.container.Container({
        items: [
            {
                forId: textField.getInputId(),
                text: 'Hello',
                xtype: 'label'
            }, {
                src: 'pic.png',
                xtype: 'image'
            },
            textField
        ],
        layout: {
            align: 'middle',
            type: 'hbox'
        }
    });
    It's then just a case of tidying up the widths, paddings, margins, etc. to get it all looking the way you want.

    The first option may appear simpler but personally I think I prefer the second option.

  4. #3
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,154
    Answers
    501
    Vote Rating
    249
      0  

    Default

    I like that second option, too. The image component lets you easily set event handlers, set the src, etc. You might wrap them in a fieldcontainer instead of just a container since fieldcontainer is labelable.
    http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.FieldContainer

  5. #4
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,422
    Answers
    3901
    Vote Rating
    1271
      0  

    Default

    That's just overnesting...

    Just need to insert the image tag into the label. You may want to check out Ext.form.Labelable and the labelableRenderTpl property
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Jul 2011
    Posts
    42
    Answers
    1
    Vote Rating
    0
      0  

    Default

    Thanks Guys

  7. #6
    Sencha Premium Member
    Join Date
    Mar 2014
    Posts
    2
    Answers
    1
    Vote Rating
    1
      0  

    Lightbulb Label Separator Saves The Day

    Hey there!

    I was facing the same problem, trying to manipulate the location of my help image that I needed directly to the right of my image, then while going through the renderLabelAbleTpl I realized that I could just add the image source directly to the label separator, then add a click event on the label. I am not totally sure if this is the best approach, but it seemed to work for me:

    Code:
        
        var helpImageString = "<img src='resources/images/help.png' class='helpSeparator' id='"+newItem.itemId+"_help_image'></img>";
    
        newItem.labelSeparator = helpImageString;
    
        newPanel.add(newItem);
    
        var helpImage = document.getElementById(newItem.itemId+"_help_image");
        
        helpImage.onclick = function(){
            var menu = Ext.create('View.view.HelpWindow',{
                items:[
                    {
                        xtype: 'displayfield',
                        value: item.helpText
                    }
                ]
            });
    
            menu.setTitle('Item Additional Info');
            menu.showAt(newItem.getXY());
        };
    The CSS:
    Code:
    .helpSeparator{
        padding-left: 1px;
        vertical-align: top;
        width: 10px;
        height: 9px;    
    }
    If someone foresees a problem with this, please let me know.

    Thanks!
    JMunny

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •