PDA

View Full Version : How to get <ul> to display in window?



murrah
7 Jul 2013, 1:21 AM
Hi.

I am wanting to display the following sample HTML fragment in an Ext.window.

initComponent: function () {
this.items = [{
html: '<h1>My heading</h1><p><ul><li>Do this</li><li>Then do this</li></ul></p>'
}];

this.callParent(arguments);
}

As you can see there is a H1, then a paragraph containing an unordered list. The H1 content is bolded but the <li> content does not show the bullets. I tried styling etc but nothing I did would show the bullets.

This is the result:
44758

In the real app I will be using an XTemplate but that wasnt working and so I ended up with this simple example to try to work out why the bullets weren't showing in my XTemplate either.

I guess I am missing something very obvious here. Can anyone enlighten me please?

Thanks,
Murray

fschaeffer
7 Jul 2013, 9:32 PM
In the newer Ext versions you can define a panel as HTMLstyled which will add some basic HTML styling including UL-lists. Just set

styleHtmlContent: true
for the component.

E.g.

{
title: 'Last changes',
height: 150,
bodyPadding: 5,
margin: '0 0 0 5',
styleHtmlContent: true,
autoScroll: true,
loader: {
url: 'data/rest/doc/CHANGES.md',
autoLoad: true
}
}

In older Ext versions an ul is predefined in Ext CSS as list-style: none. I usually add a CSS-class to the component and create a little CSS-rule which reenables the UL-styling.

E.g.


JS:
Ext.create('MyApp.view.DemoPanel', {
extend: 'Ext.panel.Panel',
title: 'Demo',
html: '<h1>Demo</h1><ul><li>List item 1</li><li>List item 2</li></ul>',
cls: 'ul-styled'
});


CSS:
.ul-styled ul {
list-style: disc;
padding: 15px;
}

murrah
7 Jul 2013, 9:54 PM
Thanks! I just searched the docs for v 4.2.1 and it does not seem to be listed. Which 'newer Ext versions' is it in?

Thanks for the alternative method too - very helpful.

Cheers,
Murray

fschaeffer
7 Jul 2013, 10:34 PM
Hi,

that's weird, I took the example from one of my ExtJS apps which is written in 4.1.3, there is the config available:
http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel-cfg-style
(http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel-cfg-style)
But in 4.2 they seem to have removed it again?

murrah
7 Jul 2013, 11:33 PM
Yes, odd. I wonder why.

Anyway, thanks for your help.

Murray