How to embed a clickable button within a Ext.list view?

[fhdeveloper]

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]

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]

Maybe something for the ComponentListView user extension?

[TommyMaintz]

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]

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]

Similar question.

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

[makhijani.rohit]

How to include buttons inside a list view?