1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default Add a button or widget to a list item

    Add a button or widget to a list item


    Update: Nevermind, I figured it out. There's a Ext.dataview.ListItem class to which I can add buttons or other items.

    I'd like to add a button to each item in my list. It would be similar to how Facebook has the "+" symbol on the right side of News Feed items - when the user clicks it, an overlay will show.

    Is there's a new/improved way to do this with Sencha Touch 2.x?

    I saw this older thread already for Sencha 1.x: http://www.sencha.com/forum/showthre...r-Ext.DataView.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    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

      0  

    Default


    I would be careful when using the ComponentView or subclasses... they have a lot more DOM
    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.

  3. #3
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default


    Thanks for the info Mitchell. Is there an alternative method that you'd recommend?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Vote Rating
    856
    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

      0  

    Default


    I personally just iterate through the records after the list is rendered and get the associated el for that record. Go down to the element that I want to render the element within and render it there.
    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.

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    40
    Vote Rating
    2
    clubby is on a distinguished road

      0  

    Default


    Gotcha thanks Mitchell. I'll give that a try.

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    27
    Vote Rating
    0
    passion4code is on a distinguished road

      0  

    Default


    After the list is rendered -- what event would we listen for that? Still on "refresh"?

  7. #7
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    I would do something like the following. You might want to use the proper MVC pattern to instantiate a copy of the ButtonList and use the control config on a Controller to listen for the buttontap event, but I hope you get the idea.

    Code:
        <script>
            Ext.define('MyApp.view.ButtonList', {
                extend: 'Ext.List',
    
                config: {
                    /**
                     * @cfg {Array} buttonTpl The template to be used to render the button.
                     */
                    buttonTpl: [
                        '<div class="x-button x-button-small x-iconalign-center x-list-button">',
                            '<span class="x-button-icon x-icon-mask add"></span>',
                        '</div>'
                    ]
                },
    
                applyButtonTpl: function(buttonTpl) {
                    if (Ext.isArray(buttonTpl)) {
                        return buttonTpl.join('');
                    }
                    return buttonTpl;
                },
    
                updateButtonTpl: function(buttonTpl) {
                    this.setItemTpl('{label}' + (buttonTpl || ''));
                },
    
                onItemTouchStart: function(list, node, index, e) {
                    var target = e.getTarget('.x-button');
                    if (target) {
                        Ext.fly(target).addCls('x-button-pressed');
                    }
    
                    this.callParent(arguments);
                },
    
                onItemTouchEnd: function(list, node) {
                    node.down('.x-button').removeCls('x-button-pressed');
                },
    
                onItemTap: function(list, node, index, e) {
                    if (e.getTarget('.x-button')) {
                        this.fireEvent('buttontap', this, this.getStore().getAt(index), node, e);
                    }
    
                    this.callParent(arguments);
                }
            });
    
            Ext.setup({
                onReady: function() {
                    var list = Ext.create('MyApp.view.ButtonList', {
                        fullscreen: true,
                        store: Ext.create('Ext.data.Store', {
                            data: [
                                {label: 'Item 1'},
                                {label: 'Item 2'},
                                {label: 'Item 3'},
                                {label: 'Item 4'},
                                {label: 'Item 5'},
                                {label: 'Item 6'}
                            ]
                        }),
                        listeners: {
                            buttontap: function(list, record, node, e) {
                                Ext.Msg.alert(record.get('label'));
                            }
                        }
                    });
                }
            });
        </script>
    
        <style>
            .x-list-button {
                position: absolute;
                right: 10px;
                top: 8px;
                margin-top: auto;
            }
        </style>
    Basically what we have done here is rendering an element in a List's itemTpl and manually listening for events and make it behave like a button.

    This is a bit more verbose then using a ComponentView, but it should be much more performant for long lists.

    Btw, the list would something like: