PDA

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



clubby
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.

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

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

mitchellsimoens
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.

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

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

TommyMaintz
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.



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

http://f.cl.ly/items/3f0g3F3j2z3k3f0V143H/Screen%20Shot%202012-02-09%20at%2012.22.57%20AM.png