PDA

View Full Version : HTML string before form items/fields.



spor
25 Mar 2010, 12:41 AM
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.

Condor
25 Mar 2010, 12:59 AM
You can't combine 'items' with 'html'. You need to include the html as one of the items, e.g.


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

spor
25 Mar 2010, 1:19 AM
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?

steffenk
25 Mar 2010, 1:40 AM
in forms i normally use the displayField for custom messages and html


items :[
{
fieldLabel: '...',
xtype: 'checkbox',
name: 'mycheck'

},
new Ext.Container({
html: '<b>' + myContent+ '</b><br /> ' + myContent2,
xtype: 'displayfield',
labelWidth: 0
})
]

spor
25 Mar 2010, 3:16 AM
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

Animal
25 Mar 2010, 3:19 AM
That is how HTML works.

httpdotcom
25 Mar 2010, 3:24 AM
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).