Custom List Element

[agoulart]

How can I add an Ext.Button to be applied to each member of my Ext.List ?

I've tried the approach of rewriting the refresh of the list, but it just does not feel right.

What I'd really like to do was something like :

Ext.define('BioMobile.view.RFQList', {
    extend: 'Ext.List',
    xtype: 'rfqlist',
    config: {
        itemTpl: Ext.create('Ext.XTemplate',
                 '<div class="test" id="{id}"/>',
                Ext.create('Ext.button', { ... },
                 '</div>')
    }
});

Is it possible ?

[george.m]

Indeed it is possible, you're going to have to use a DataView for that. Below is a link to a tutorial, all you need is in there.

http://www.sencha.com/blog/dive-into...ouch-2-beta-2/

[agoulart]

Thanks for your answer George.

I did create the code based on DataView, but it turns out much more complicated than my original
code. For the sake of others I will post parts of my code here anyway.

To use the DataView, the first thing I did was to extend the DataView component and set the
following configurations :

        useComponents: true,
        defaultType: 'testlistitem',

Then I went to create my TestListItem class :

Ext.define('myApp.view.TestListItem', {
    extend: 'Ext.dataview.component.DataItem',
    xtype: 'testlistitem',

    config: {
        layout: {
            type: 'hbox',
            align: 'center'
        },
        
        itemTpl: {
            template: [
                 '<div class="test" id="{id}"/>',
                 '<h2>[{[this.formatTime(values.testDate)]}] {id}  - {title} </h2>',
                 '</div>'

            ],
            cfg : {
                    formatTime: function ( time ) {
                        var fmt = "";
                        fmt += (time.getHours() < 10)?'0':'';
                        fmt += time.getHours();
                        fmt += ':';
                        fmt += (time.getMinutes() < 10)?'0':'';
                        fmt += time.getMinutes();
                        return fmt;
                    }
                 }
        }        
        
    },
    applyItemTpl: function(config) {
        var cmp = Ext.factory(config, Ext.Component, this.getItemTpl());
        if (cmp.getTpl() == undefined)
            cmp.setTpl(new Ext.XTemplate( config.template.join(''), config.cfg ));
        cmp.apply = function(data) {
            this.setHtml (this.getTpl().apply(data));
        };
        return cmp;
    },
    updateItemTpl: function(newTpl, oldTpl) {
        if (newTpl) {  this.add(newTpl); }
          if (oldTpl) { this.remove(oldTpl); }
    },
    
    updateRecord: function(newRecord, oldRecord) {
        this.getItemTpl().apply(newRecord.data);
        this.callParent(newRecord, oldRecord);    
    }
});

With this code, I was able to put a XTemplate piece of HTML inside my DataView, and following the tutorial I did add other components.
However I stop right there because I lost some of the List facilities, Like the grouper function, and
the function that allowed me to itemTap and swap to another screen.

For now I have implemented a refresh listener for my list :

    refreshList: function(listObj) {
        var store = listObj.getStore();
      listObj.element.select('div.test').each( function(item) {
            if (item.select('div.genericbutton').elements.length == 0) {
                    var data = store.getById(item.id);
                   Ext.create('Ext.Button', {
                       itemId:         'appButton' + data.getId(),
                               cls:         'genericbutton',
                               style:         'float: left',
                               margin:         '0 5 0 5',
                               ui:             'action',
                               width:        100,
                    text:         'Do It',
                renderTo:     item,
                handler:     function(btn, e) {
                        console.log('I did It !!! ' + data.getId());
                       }
                });
            }
        });
    },

I hope this can be of some use to someone trying to do the same thing I am trying to do.

If anyone ends up with a different solution I'd be glad to hear.