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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar