1. #1
    Ext User
    Join Date
    Jun 2010
    Posts
    17
    Vote Rating
    0
    fhdeveloper is on a distinguished road

      0  

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

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


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

  2. #2
    Ext User
    Join Date
    Jun 2010
    Posts
    17
    Vote Rating
    0
    fhdeveloper is on a distinguished road

      0  

    Default


    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.

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

    Code:
    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));
    			    	}

  3. #3
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Maybe something for the ComponentListView user extension?

  4. #4
    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


    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.

  5. #5
    Sencha User jep's Avatar
    Join Date
    Sep 2010
    Posts
    862
    Vote Rating
    21
    jep will become famous soon enough jep will become famous soon enough

      0  

    Default


    Quote Originally Posted by TommyMaintz View Post
    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?

  6. #6
    Sencha User
    Join Date
    Oct 2009
    Posts
    33
    Vote Rating
    0
    notcourage is on a distinguished road

      0  

    Default


    Similar question.

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

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    6
    Vote Rating
    0
    makhijani.rohit is on a distinguished road

      0  

    Default Buttons inside a list view?

    Buttons inside a list view?


    How to include buttons inside a list view?

Similar Threads

  1. Clickable images inside a list
    By davorin in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 1 Jul 2010, 1:53 PM
  2. Replies: 22
    Last Post: 1 Nov 2009, 11:45 PM
  3. List view which behaves like windows explorer list view
    By suvarnal in forum Ext GWT: Help & Discussion (1.x)
    Replies: 4
    Last Post: 9 Dec 2008, 5:39 AM
  4. clickable url in tree view
    By tab in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 10 Mar 2007, 6:38 AM

Thread Participants: 5