1. #1
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Cave
    Posts
    176
    Answers
    2
    Vote Rating
    2
    29er is on a distinguished road

      0  

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

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


    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!

  2. 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

  3. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Answers
    101
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

    Code:
    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.

  4. #3
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Cave
    Posts
    176
    Answers
    2
    Vote Rating
    2
    29er is on a distinguished road

      0  

    Post


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


    here is my itemTpl:
    HTML Code:
    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
    Code:
    <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:

    Code:
    <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.

  5. #4
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Cave
    Posts
    176
    Answers
    2
    Vote Rating
    2
    29er is on a distinguished road

      0  

    Default


    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

  6. #5
    Sencha User
    Join Date
    Sep 2011
    Posts
    125
    Answers
    1
    Vote Rating
    0
    oddz is on a distinguished road

      0  

    Default


    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.

  7. #6
    Ext JS Premium Member
    Join Date
    Nov 2009
    Location
    Cave
    Posts
    176
    Answers
    2
    Vote Rating
    2
    29er is on a distinguished road

      0  

    Default


    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

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar