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
    37,545
    Vote Rating
    873
    Answers
    3566
    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