PDA

View Full Version : How to embed a clickable button within a Ext.list view?



fhdeveloper
2 Jul 2010, 5:13 PM
I want to have each of my list elements to have a button. When the button is clicked it would fire some function (and passed in is the list entry that was clicked on's data model)

Right now I have this code:


this.template = new Ext.XTemplate(
'<tpl for="."><div class="location_entry"><strong>{[this.shorten(values["name"])]}</strong> {description} <p padding="4" align="right"><a onclick="func({#}-1,this)" class="medium button red">Test</a></p></div></tpl>',


this calls func but I would rather do this in a more object oriented way -- further more it does not capture the list items click event so that also fires... if the button is pressed i don't want the list item to be selected.

Any help is greatly appreciated

fhdeveloper
2 Jul 2010, 9:49 PM
Hi...

I figured it out. I am posting the solution (which isn't super elegant) here in case anyone has the same problem.

I wait until the Ext.List is rendered ... in the template I add a div with a prefix + the row of the list entry.



this.template = new Ext.XTemplate(
'<tpl for="."><div class="list_entry"><table width="100%"><tr><td><strong>{[this.shorten(values["name"])]}</strong> {description} </td><td align="right"><span id="button_{#}" ></span></td></tr></table></div></tpl>',
{
// member functions:
shorten: function(name){
if(name.length<=24)return name;
name = name.substring(0,22);
name+="...";
return name;
},
isSet: function(value){
return value!=null;
}
}
);


now I call this code once it is rendered:



for(var i =1; i<=dataInput.length; i++){
var button = new Ext.Button({
maxWidth:70,
text: 'Hop',
ui:'drastic',
handler: function(){

},
scope: parent
});

button.render(document.getElementById("button_"+i));
}

Condor
2 Jul 2010, 11:08 PM
Maybe something for the ComponentListView user extension?

TommyMaintz
5 Jul 2010, 1:40 PM
Thanks for the feedback and solution. We are currently working on List improvements, and came we came up with something similar. We will add the capability to add buttons to list items (amongst other new features), so hopefully this workaround will not be needed anymore soon.

jep
12 May 2011, 1:07 PM
Thanks for the feedback and solution. We are currently working on List improvements, and came we came up with something similar. We will add the capability to add buttons to list items (amongst other new features), so hopefully this workaround will not be needed anymore soon.

So did this ever actually happen? I'm needing this functionality and I can't find that any work has been done on it. Am I missing something?

notcourage
28 Jun 2011, 10:32 AM
Similar question.

I want to inject a Button (and other form widgets) into a <table> generated by a DataView.

makhijani.rohit
31 Jan 2012, 4:12 AM
How to include buttons inside a list view?

=NR=
16 Nov 2014, 7:03 PM
Thanks for the feedback and solution. We are currently working on List improvements, and came we came up with something similar. We will add the capability to add buttons to list items (amongst other new features), so hopefully this workaround will not be needed anymore soon.

so it never got to final release i suppose which is upsetting as we clearly needing this simple functionality..