Ext.form.Label - text overflow

  1. #1

    Ext.form.Label - text overflow

    Hi all,

    I have a label which gets renderred to a panel. Here's a snipped of the code:

    xtype: 'panel',
                            layout: 'vbox',
                            height: 400,
                            border: true,
                            //width: 600,
                            items: [
                                 new Ext.form.Label({
                                     initialConfig: {
                                         id: 'travelOperatorInheritedLabel',                                                                                                       
                                         style: {
                                             height: '50px',
                                            width:'100px',
                                            border: '1px solid'
                                         }
                                     }
                                     
                                 })......etc
    The problem is that when I alter the text of the label, the new text overflows beyond the width of the label (doesn't disapper behind it- actually extends beyond the label). This is how I alter the text:

     Ext.getCmp('travelOperatorInheritedLabel').setText("My reaallllllllllllllllllllllllllllllllllllllllyyyyyyy long text");
    What can I do so that the text wraps within the label instead, preferably the label could scroll vertically if required. I've tried various ways of setting the width and height but the behaviour is the same.

    I'm using IE8.

    Thanks,

    Shaun
    Last edited by geoffrey.mcgill; Oct 19, 2010 at 4:03 PM. Reason: please use [CODE] tags
  2. #2
    Hi,
    I am faced with the same issue here and am working on it. If I find a solution, i'll let you know.
    Btw, considering, that this question was posted in Oct 2010, did you solve it yourself? Will be glad if you posted the solution.

    regards,
    arya
  3. #3
    Hi,

    Newbie and just guessing, but have you tried .update() and .updateBox()?

    http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.Label might help.

    Good luck!
  4. #4

    workaround :)

    Hi..
    Needed a fast solution to the issue as I have a deadline to meet. So tried a workaround to my issue. Hope this helps.

    My idea was to truncate the text(a filename) beyond a particular length, and show just a few chars in the beginnning of the name and a few characters in the end, and in between these a pattern say '...' to show continuity. When the user moves the mouse over the label, the entire text will be shown, with the background of the text in a slightly highlighted color.

    what I did:
    1. I know that the label text fits into the space I have alloted it, if it's around 55-60 characters or less.
    2. So wrote a function getDisplayFileName . If the text is more than 55 characters (approx. as diff. characters take up different amounts of screen space), this function splits the text to display the first 25 chars followed by '...' followed by the last 25 chars.
    3. Dropped the onMouseOver idea. Instead I set a tooltip which displays the entire text.

    But again there's an issue, that the text overflows out of the tooltip too. :(

    In my case, the label text is actually a link to the file to be downloaded. So in the <a href> tag, i gave the title attribute to display the entire text.

                               ...
                                               items: [
    									{
    									xtype : 'label',
    									id : 'downloadLink',
    									width : 354,
    									listeners : {
    											afterrender : this.displayValue,
    											scope : this
    											}
    									}, ...]
                                     ...
    
            displayValue : function(downloadLink){
                            var url1= "<link>";
                            var filename = "realllyyyyyyyyyyyy looooooooooooooooooooooooooong Fileeeeeeeeeeeeeeeeeeeee nameeeeeeeeeeeeeeeee";
    			var displayFileName = this.getDisplayFileName(fileName);
    			
                            downloadLink.setText('<a href = ' +url1+ ' title = ' +filename+ '>' + displayFileName+ '</a>');
                },
    
             getDisplayFileName : function(fileName){
       		 if(fileName.length > 55){
         				fileName = fileName.slice(0,25) + "..." + fileName.slice(-25);
         			}
         		return fileName;
    	    }

    This was a quick workaround. The onMouseOver if done, will be better.

    @jwf: I have to yet try the update() function as this solved my problem. :) will try it though. thanks.
    @shaunhendrix :
    "What can I do so that the text wraps within the label instead, preferably the label could scroll vertically if required. I've tried various ways of setting the width and height but the behaviour is the same."
    This workaround is not what shaun asked for. Will let u guys know if I come across a proper solution to shaun's original query.

    Regards,
    arya
    P.S: Im a beginner just beginning to dig in my heels deeply in EXT JS. Excuse any sillinesses. :)
    Last edited by aryarajan; May 23, 2011 at 9:01 AM.

Similar Threads

  1. [CLOSED] Label remembers its value (.Text)
    By pk.net in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 16, 2012, 10:39 AM
  2. Label text size different.
    By chearner in forum 1.x Help
    Replies: 1
    Last Post: Dec 30, 2011, 10:32 PM
  3. Replies: 1
    Last Post: Sep 24, 2011, 10:52 PM
  4. GUID in Ext:Label.Text property...
    By shaun in forum 1.x Help
    Replies: 2
    Last Post: Jul 26, 2009, 8:14 PM
  5. Label with Empty Text
    By Jack in forum 1.x Help
    Replies: 1
    Last Post: Nov 07, 2008, 3:21 AM

Tags for this Thread

Posting Permissions