1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    6
    Vote Rating
    1
    nicanor.gutierrez is on a distinguished road

      0  

    Default Answered: Adding custom record to template in dataview

    Answered: Adding custom record to template in dataview


    Hello, I'm developing an app with ExtJS 4.1.1a and i'm having some trouble with templates.

    Background: I have a dataview that shows a list of categories. When you click in a category, a grid is filtered, showing just the items that correspond to that category. The working code is the following:

    Code:
    var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                   '<div class="category-list-item">',
                            '<span style="margin-left:10px; font-weight:bold;">{name}</span>',
                    '</div>',
            '</tpl>',);
    
    Ext.define('MyApp.view.CategoriesList', {
                extend : 'Ext.panel.Panel',
                alias : 'widget.categorieslist',
                animCollapse : true,
                region : 'west',
                width : 200,
                layout : 'fit',
                title : 'Categories',
                items : [{
                    xtype : 'dataview',
                    store : 'Categories',
                    autoScroll : true,
                    selModel : {
                        mode : 'SINGLE',
                    },
                    trackOver : true,
                    cls : 'category-list',
                    itemSelector : '.category-list-item',
                    overItemCls : 'category-list-item-hover',
                    tpl : tpl
                }]
            });
    Goal: What I want to achieve is adding a new category called "Show all", that lets you to clear the filter and show all the items. BUT I don't want to have it in my categories Store, because I'm using that store in other places where it makes not sense at all to have a "Show all" category.

    My approach is the following:
    Code:
    var tpl = new Ext.XTemplate(
              '<div class="category-list-item">',
                            '<span>Show all</span>',
              '</div>',
            '<tpl for=".">',
                   '<div class="category-list-item">',
                            '<span>{name}</span>',
                    '</div>',
            '</tpl>',);
    
    Ext.define('MyApp.view.CategoriesList', {
                extend : 'Ext.panel.Panel',
                alias : 'widget.categorieslist',
                animCollapse : true,
                region : 'west',
                width : 200,
                layout : 'fit',
                title : 'Categories',
                items : [{
                    xtype : 'dataview',
                    store : 'Categories',
                    autoScroll : true,
                    selModel : {
                        mode : 'SINGLE',
                    },
                    trackOver : true,
                    cls : 'category-list',
                    itemSelector : '.category-list-item',
                    overItemCls : 'category-list-item-hover',
                    tpl : tpl
                }]
            });

    Problem: That code is not working and the dataview is not rendered. After some tests I realize that if I use in my new div the class name that I'm using as itemSelector, the template will not work. I could change the class name, but I will lose all the functionality provided by the dataview.

    Is there any way to achieve this?

    I tried changing the class of the div that I included to 'category-list-item2', and using as itemSelector '.category-list-item, category-list-item2' but it didn't work. I also tried putting it inside de tpl for and use a tpl if="xindex==1" but the result was the same.

    Thanks in advance.

  2. The issue is if you use the same class as the itemSelector, it's going to assume there is a record for that row but you don't have it. So you need to use a different class for the select all div and then handle the click on it.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    The issue is if you use the same class as the itemSelector, it's going to assume there is a record for that row but you don't have it. So you need to use a different class for the select all div and then handle the click on it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    6
    Vote Rating
    1
    nicanor.gutierrez is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    The issue is if you use the same class as the itemSelector, it's going to assume there is a record for that row but you don't have it. So you need to use a different class for the select all div and then handle the click on it.
    Thanks for clarifying me that! I will try to handle it by myself.

    Thanks again!

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."