XTemplate definition on items property of a ListItem

Question

I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.

The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).

list

Ext.define( 'app.view.myList', {
    //extend: 'Ext.dataview.DataView',
    extend: 'Ext.dataview.List',

    xtype: 'mylist',

    requires: [
        'app.view.MyItem'
    ],

    config: {
        title: "myTitle",
        cls: 'mylist',
        defaultType: 'myitem',
        grouped: true,
        store: 'myStore',
        useComponents: true,
        itemCls: 'myitem',

        items: [
            {
                // some components
            }
        ]
    }
});

listitem

Ext.define( 'app.view.myItem', {

    //extend: 'Ext.dataview.component.DataItem',
    extend: 'Ext.dataview.component.ListItem',
    xtype: 'myitem',

    config: {
        cls: 'myitem',

        items: [
            {
                xtype: 'component',
                tpl: new Ext.XTemplate([
                        '<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
                            //some xtemplate content
                        '</table>'
                    ].join( "" ),
                    {
                        compiled: true
                    })
            },

            {
                label: 'some label',
                cls : 'myitemtextfield',
                xtype: 'textfield',
                name: 'myitemtextfield'
             }
        ]
    }
});

Thanks in advance!

user993553 · Accepted Answer · 2015-10-07T07:46:38.247

Modifed /touch-2.4.2/examples/list/index.html

The model:

Ext.define('model1', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'firstName', type: 'string'},
            {name: 'lastName', type: 'string'}
        ]
    }
});

The CustomListItem

Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
        xtype: 'basic-dataitem',
        requires: [
                'Ext.Button',
                'Ext.Component',
                'Ext.layout.HBox',
                'Ext.field.Checkbox'
        ],
        config: {
        dataMap : {
       /* getFirstname : {
         setData : 'firstName'

         },*/
        getLastname : {
        setValue : 'lastName'
        }
        },
                layout: {
                type: 'hbox',
                        height:'200px',
                },
                firstname: {
                cls: 'firstname',
                        xtype:'component',
                        data:{data:'hej'},
                        tpl: new Ext.XTemplate([
                                '<H1>',
                                '{data}',
                                '</H1>'
                        ].join(""),
                        {
                        compiled: true
                        })

                },
                lastname: {
                xtype:'textfield',
                css:'lastname'



                }

        },
        applyFirstname : function (config) {
            return Ext.factory(config, Ext.Component, this.getFirstname());
        },
        updateFirstname : function (newName) {
            if (newName) {
                this.add(newName);
            }
        },
        applyLastname : function (config) {
            return Ext.factory(config, Ext.Component, this.getLastname());
        },
        updateLastname : function (newAge) {
            if (newAge) {
                this.add(newAge);
            }
        },
        applyFirstName: function (config) {
            return Ext.factory(config, 'Ext.Component', this.getLastname());
        },
        updateRecord: function(record) {     
        if (!record) {
            return;
        }


        this.getFirstname().setData({data:record.get("firstName")});
        this.callParent(arguments);

    }
        });

The store

var store = Ext.create('Ext.data.Store', {
        //give the store some fields
        model: 'model1',
        //filter the data using the firstName field
        sorters: 'firstName',
        //autoload the data from the server
        autoLoad: true,
        //setup the grouping functionality to group by the first letter of the firstName field
        grouper: {
            groupFn: function (record) {
                return record.get('firstName')[0];
            }
        },
        //setup the proxy for the store to use an ajax proxy and give it a url to load
        //the local contacts.json file
        proxy: {
            type: 'ajax',
            url: 'contacts.json'
        }
    });

The list

 xtype: 'list',
            useSimpleItems: false,
            defaultType: 'basic-dataitem',
            id: 'list',
            ui: 'round',     
            //bind the store to this list
            store: store

Thanks for your code - it's not much explanation there ;) Tried to do it like in your example - was bit hard. It works fine for the textfield component, but the XTemplate on the ListItem won't be rendered. — kerosene, Oct 09 '15 at 09:50

XTemplate definition on items property of a ListItem

1 Answers1