ToggleIconButton and List

edited May 2013 in Newbie Questions
I have a simple List of contacts (similar to the sample contact list application).
The contact item kind contains a ToggleIconButton that when clicked will enable or disable a random item in the list.

Is there anything special that I need to do in order to ensure that the Toggle is only applied to the button where the event occurred?

Here is a sample of what I'm experiencing based on the twitter example:
	name: "App",
	classes: "enyo-unselectable enyo-fit onyx",
	kind: "FittableRows",
	components: [
		{kind: "onyx.Toolbar", components: [
			{kind: "Image", src: "assets/img1.png", style: "width: 20px;"},
			{content: "App"},
		{name: "list", kind: "List", classes: "list-sample-pulldown-list", fit: true, onSetupItem: "setupItem", components: [
			{name: "itemContact", kind: "ItemContact"}
	rendered: function() {
	search: function() {
		// Capture searchText and strip any whitespace
		var searchText = 'enyojs';

		if (searchText !== "") {
			var req = new enyo.JsonpRequest({
				url: "",
				callbackName: "callback"
			req.response(enyo.bind(this, "processSearchResults"));
			req.go({q: searchText, rpp: 20});
		} else {
			// For whitespace searches, set new content value in order to display placeholder
	processSearchResults: function(inRequest, inResponse) {
		this.results = inResponse.results;
		if (this.pulled) {
		} else {
	setupItem: function(inSender, inEvent) {
		var i = inEvent.index;
		var item = this.results[i];
		this.$.itemContact.initContact(i, item);

	name: "ItemContact",
	components: [
		{style: "padding: 10px;", classes: "list-sample-pulldown-item enyo-border-box", components: [
			{name: "icon", kind: "Image", style: "float: left; width: 48px; height: 48px; padding: 0 10px 10px 0;"},
			{kind: "onyx.ToggleIconButton", style: "float: right; padding-left: 20px;", src: "assets/favorite.png", onChange: "toggleChanged"},
			{name: "name", tag: "p", style: "word-wrap: break-word;", allowHtml: true}
	index: 0,
	item: undefined,
	initContact: function(iIndex, iItem) {
		this.index = iIndex;
		this.item = iItem;
	startChat: function() {
		alert('starting chat for ...' + this.item);
	toggleChanged: function(inSender, inEvent) {
		alert( + " was " + (inSender.getValue() ? " selected." : "deselected."));


  • Not use a List, but use a Repeater instead. Since Lists use the flyweight pattern, they can't handle complex interaction without a bit of support coding.
Sign In or Register to comment.