Override Ext.List to use UL/LI instead of Divs

[29er]

Im just wondering how to customize the the xtype:list , so that the markup creates a UL and the itemTpl creates LI's, instead of Divs.
I'm sure there is a way but i'm pretty new to sencha.
Thanks!

[jay@moduscreate.com]

I looked into this quickly, and it seems that if you specified an xtemplate like:

itemTpl : Ext.create('Ext.XTemplate', 
    '<ul>',
        '<tpl for=".">',
            '<li>',
                '{my_tokens_here}',
            '</li>',
        '</tpl>',
    '</ul>'
),

it should work as you would like. Try setting this in the config object that you pass to the constructor.

[29er]

Thanks Jay, but it doesn't emit the html like i need.
it still gives me markup like below:


here is my itemTpl:

var mytpl = new Ext.XTemplate('<ul><tpl for=".">', '<li><a href="{a_href}">', '<img alt="{desc_text}" width="72" src="{img_url}"/>', '<span>{desc_text}</span>', '</a></li>', '</tpl></ul>');

Here are two items in the list, still wrapping with div's for each item in the list

<div class="x-list-item" itemindex="0" id="ext-element-16">
      <div class="x-list-item-label">
         <ul>
            <li><a  href="test"><img alt="test" width="72" src="on.png"/>      <span>Description</span></a></li>
         </ul>
      </div>
   </div>
   <div class="x-list-item x-item-selected" itemindex="1" id="ext-element-17">
      <div class="x-list-item-label">
         <ul>
            <li><a  href="mynewhref"><img alt="Descript2" width="72" src="off.png" /><span>Descript2</span></a></li>
         </ul>
      </div>
   </div>

when what i really want is something like this:

<ul id="grid">
            <li>
                 <a href="myhref"><img src="icon.png" alt="Description" width="72" />
                <span>Description</span>
            </a></li>
            <li>
                <a href="myhref"><img src="con2.png" alt="Descript2" width="72" />
                <span>Description2</span>
            </a></li>...
   ....more LI's here
</ul>

maybe i need to use something like autoEl ? or just create a custom component and bypass Ext.List altogether ?
Thanks for the help.

[29er]

I just decided to make a custom component instead of forcing a List or DataView. damn, who would have thought it would be such work to make a simple UL control with an xtemplate for the li items!

Thanks

[oddz]

May I ask why? I mean if you are using Touch your probably not using it because of it's semantics… just saying. Turning a few divisions into proper list items is very minute in comparison to all the other none semantic decisions that exist. There really isn't much to gain, but increasing code complexity with this… That said I agree that list items should actually be list items but surely those decisions were made for a decent reason, which I can live with.

[29er]

yes you have a good point, I can write CSS to make the list look however i want. It's just that i am very accustomed to using UL's (with no decoration) to format/style 'groups' of items in any manner imaginable. but you're right, I have found that the custom control I built is very buggy in mobile applications, and I decided to use the default Ext.List and style the div's instead.
I know there must be a reason for using divs instead of UL/OL's, but sometimes i wonder just what that is