View Full Version : Add a button or widget to a list item

18 Jan 2012, 7:57 AM
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/showthread.php?118790-Buttons-(and-other-widgets)-in-Ext.List-or-Ext.DataView.

18 Jan 2012, 9:43 AM
I would be careful when using the ComponentView or subclasses... they have a lot more DOM

18 Jan 2012, 10:14 AM
Thanks for the info Mitchell. Is there an alternative method that you'd recommend?

18 Jan 2012, 10:23 AM
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.

18 Jan 2012, 10:41 AM
Gotcha thanks Mitchell. I'll give that a try.

8 Feb 2012, 8:08 PM
After the list is rendered -- what event would we listen for that? Still on "refresh"?

9 Feb 2012, 12:21 AM
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.

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>',

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) {


onItemTouchEnd: function(list, node) {

onItemTap: function(list, node, index, e) {
if (e.getTarget('.x-button')) {
this.fireEvent('buttontap', this, this.getStore().getAt(index), node, e);


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) {

.x-list-button {
position: absolute;
right: 10px;
top: 8px;
margin-top: auto;

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: