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:
enyo.kind({
	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() {
		this.inherited(arguments);
		this.search();
	},
	search: function() {
		// Capture searchText and strip any whitespace
		var searchText = 'enyojs';

		if (searchText !== "") {
			var req = new enyo.JsonpRequest({
				url: "http://search.twitter.com/search.json",
				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
			this.$.searchInput.setValue(searchText);
		}
	},
	processSearchResults: function(inRequest, inResponse) {
		this.results = inResponse.results;
		this.$.list.setCount(this.results.length);
		if (this.pulled) {
			this.$.list.completePull();
		} else {
			this.$.list.reset();
		}
	},
	setupItem: function(inSender, inEvent) {
		var i = inEvent.index;
		var item = this.results[i];
		this.$.itemContact.initContact(i, item);
	}
});

enyo.kind({
	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;
		this.$.icon.setSrc('assets/img2.png');
		this.$.name.setContent(this.item.from_user_name);
	},
	startChat: function() {
		alert('starting chat for ...' + this.item);
	},
	toggleChanged: function(inSender, inEvent) {
		alert(inSender.name + " was " + (inSender.getValue() ? " selected." : "deselected."));
	}
});
Thanks

Comments

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