1. #1
    Sencha User
    Join Date
    Dec 2012
    Location
    São Paulo, Brazil
    Posts
    2
    Vote Rating
    0
    agoulart is on a distinguished road

      0  

    Default Unanswered: Custom List Element

    Unanswered: Custom List Element


    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 :

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

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Location
    England
    Posts
    135
    Answers
    11
    Vote Rating
    7
    george.m is on a distinguished road

      0  

    Default


    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/

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Location
    São Paulo, Brazil
    Posts
    2
    Vote Rating
    0
    agoulart is on a distinguished road

      0  

    Default


    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 :
    Code:
            useComponents: true,
            defaultType: 'testlistitem',
    Then I went to create my TestListItem class :

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

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

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..." hd porno faketaxi