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
    391
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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,556
    Answers
    3931
    Vote Rating
    1272
      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! Checkout the CODE tag!

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

  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
  •