Results 1 to 7 of 7

Thread: HTML string before form items/fields.

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default HTML string before form items/fields.

    This is probably noob question of the day.

    I would like to have HTML content in a FormPanel first, then the form fields, but it didn't work with the following code, I get the fields first.

    var fp = new Ext.form.FormPanel({

    width : 400,
    height : 160,
    frame : true,
    bodyStyle : 'padding: 6px',
    labelWidth : 126,
    defaultType : 'textfield', // 1
    defaults : {
    msgTarget : 'side', // 2
    anchor : '-20'
    },
    html : 'Field label',

    items : fpItems
    });

    Also, how do I get just plain html strings, not field labels, aligned to the field labels and fields below, like they are in the same columns. For example, you have 2 imaginary columns, one for field labels, and one for the fields with user inputs. Now, abow that we would like to have 1 string for each column.

  2. #2
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    You can't combine 'items' with 'html'. You need to include the html as one of the items, e.g.

    Code:
    items: [{
      xtype: 'box',
      autoEl: {cn: 'Some content'}
    },{
      ...
    }]

  3. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    I see, thanks, that solved the main issue

    Now, if I want to do some formatting on
    autoEl: {cn: 'Some content'},

    what's the Ext JS way of doing that, or at least the more convenient way.

    Also, if we add
    autoEl: {cn: 'Some more content'} in addition to the first, it will be a line break.

    How do we add the content on the same line as the previous, and if possible, aligned in imaginary rows, just like the form fields with labels first?

  4. #4
    Sencha Premium Member steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,675

    Default

    in forms i normally use the displayField for custom messages and html
    Code:
    items :[
    {
    	fieldLabel: '...',
    	xtype: 'checkbox',
    	name: 'mycheck'
    	
    }, 
    	new Ext.Container({
    		html: '<b>' + myContent+ '</b><br /> ' + myContent2,
    		xtype: 'displayfield',
    		labelWidth: 0
    	})
    ]
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User
    Join Date
    Mar 2010
    Posts
    119

    Default

    Thanks for your help too, steffenk.

    It looks like whitespaces are trimmed. Any workaround for this?

    var myContent = 'Very meaningful content';
    var space = ' \t ';

    var fpItems = [

    new Ext.Container({
    html: '<b>' + myContent + '</b>' + space + 'yes indeed',
    xtype: 'displayfield',
    labelWidth: 50
    }),
    .....

    Output:
    Very meaningful content yes indeed

  6. #6
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    That is how HTML works.

  7. #7
    Sencha User
    Join Date
    Jan 2008
    Location
    Maryville, IL, US
    Posts
    288

    Default

    There is no tab in HTML. You could pad-right, or margin-right, the displayfield x pixels to simulate a tab, or actually create an html "space" element (like a transparent image, or a <span> block).

Posting Permissions

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