kind confusion

edited May 2013 in Enyo 2
Hi all,

Its been a week now out of enyo..was on holiday..so back to work. Here is my script, I am trying to add different html content based on the click
enyo.kind({
		name: "ControlSample",
		kind: "Scroller",
		components: [
			{ kind: "onyx.InputDecorator", components: [
			{ kind: "onyx.Input", placeholder: "Enter UserName",
			onchange: "changed" }
			]},
			{ tag: "br"},{ tag: "br"},
			{ kind: "onyx.InputDecorator", components: [
			{ kind: "onyx.Input", placeholder: "Enter Password",
			onchange: "changed" }
			]},
			{ tag: "br"},{ tag: "br"},
			{ kind: "onyx.Button", content: "Sign In" }
		],
		tapped: function(inSender, inEvent) {
		// React to taps
		},
		changed: function(inSender, inEvent) {
		// React to changes
		}
		});
		
enyo.kind({
    name: "ListSample",
 	kind: "Panels",
	classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit",
	arrangerKind: "CollapsingArranger",
	components: [
		{layoutKind: "FittableRowsLayout", classes: "enyo-fit panels-sample-flickr-main",components: [
			{kind: "List", fit: true,  count: 3, touch: true,  onSetupItem: "setupItem", ontap: "itemTap",components: [
				
					{ name: "text",classes: "panels-sample-flickr-item enyo-border-box" }
				
			]}
		]},
		{name: "pictureView", fit: true, kind: "FittableRows", classes: "enyo-fit panels-sample-flickr-main", components: [
			{name: "backToolbar", kind: "onyx.Toolbar", showing: false, components: [
				{kind: "onyx.Button", content: "Back", ontap: "showList"}
			]},
			{fit: true, style: "position: relative;", components: [
				{  fit: true,name: "text1" },
				{name: "imageSpinner", kind: "Image", src: "assets/spinner-large.gif", classes: "enyo-fit panels-sample-flickr-center", showing: false}
			]}
		]}
	],
	setupItem: function(inSender, inEvent) {
	var ic = inEvent.index;//alert(ic);
	
	this.results = [];
	var items={"employees": [{ "id":"John" , "content":"Test" },{ "id":"Madhu" , "content":"Madhu1" }]};
	
	this.results = this.results.concat(items);
		for(var i = 0; i < ic; i++) {
			//this.items[i] = "This is row " + i;
			this.$.text.setContent(items.employees[i].id);
		}
		this.$.text.addRemoveClass("onyx-selected", inSender.isSelected(ic));
       // this.$.text.setContent("This is row " + items.inEvent.items);
        return(true);
    },
	reflow: function() {
		this.inherited(arguments);
		var backShowing = this.$.backToolbar.showing;
		this.$.backToolbar.setShowing(enyo.Panels.isScreenNarrow());
		if (this.$.backToolbar.showing != backShowing) {
			this.$.pictureView.resized();
		}
	},
    tapped: function(inSender, inEvent) {
        enyo.log(inEvent.index);
    },
	itemTap: function(inSender, inEvent) {
		if (enyo.Panels.isScreenNarrow()) {
			this.setIndex(1);
		}
		var item = this.results[0];alert(item.employees[inEvent.index-1].id);
		this.$.text1.hide();
		this.$.text1.setContent(ControlSample);
		
		this.$.text1.show();
		//this.$.text.setContent(items[i].id);
		this.$.imageSpinner.show();
		//var item = this.results[inEvent.index];
		//08023396510
	},
	showList: function() {
		this.setIndex(0);
	}
});
But problem is, I am not getting the actual kind content in my second list. Any help pls..

Comments

  • Can you put this into a jsfiddle to show the problem? There's not enough code here to completely reproduce your setup.
  • edited May 2013
    @unwiredben
    Sorry no jsfiddle from company..have pasted the whole html page of my design. The design is when I click john or madhu, I need the form to appear. No using switch, I can get different components to be printed.
    When I click john, I need a form and when I click madhu I need list. Please find the script
    <!DOCTYPE html>



    Enyo Bootplate App




    enyo.kind({ name: "ControlSample", kind: "Scroller", components: [ { kind: "onyx.InputDecorator", components: [ { kind: "onyx.Input", placeholder: "Enter UserName", onchange: "changed" } ]}, { tag: "br"},{ tag: "br"}, { kind: "onyx.InputDecorator", components: [ { kind: "onyx.Input", placeholder: "Enter Password", onchange: "changed" } ]}, { tag: "br"},{ tag: "br"}, { kind: "onyx.Button", content: "Sign In" } ], tapped: function(inSender, inEvent) { // React to taps }, changed: function(inSender, inEvent) { // React to changes } }); enyo.kind({ name: "ListSample", kind: "Panels", classes: "panels-sample-flickr-panels enyo-unselectable enyo-fit", arrangerKind: "CollapsingArranger", components: [ {layoutKind: "FittableRowsLayout", classes: "enyo-fit panels-sample-flickr-main",components: [ {kind: "List", fit: true, count: 3, touch: true, onSetupItem: "setupItem", ontap: "itemTap",components: [ { name: "text",classes: "panels-sample-flickr-item enyo-border-box" } ]} ]}, {name: "pictureView", fit: true, kind: "FittableRows", classes: "enyo-fit panels-sample-flickr-main", components: [ {name: "backToolbar", kind: "onyx.Toolbar", showing: false, components: [ {kind: "onyx.Button", content: "Back", ontap: "showList"} ]}, {fit: true, style: "position: relative;", components: [ { fit: true,name: "text1" }, {name: "imageSpinner", kind: "Image", src: "assets/spinner-large.gif", classes: "enyo-fit panels-sample-flickr-center", showing: false} ]} ]} ], setupItem: function(inSender, inEvent) { var ic = inEvent.index;//alert(ic); this.results = []; var items={"employees": [{ "id":"John" , "content":"Test" },{ "id":"Madhu" , "content":"Madhu1" }]}; this.results = this.results.concat(items); for(var i = 0; i < ic; i++) { //this.items[i] = "This is row " + i; this.$.text.setContent(items.employees[i].id); } this.$.text.addRemoveClass("onyx-selected", inSender.isSelected(ic)); // this.$.text.setContent("This is row " + items.inEvent.items); return(true); }, reflow: function() { this.inherited(arguments); var backShowing = this.$.backToolbar.showing; this.$.backToolbar.setShowing(enyo.Panels.isScreenNarrow()); if (this.$.backToolbar.showing != backShowing) { this.$.pictureView.resized(); } }, tapped: function(inSender, inEvent) { enyo.log(inEvent.index); }, itemTap: function(inSender, inEvent) { if (enyo.Panels.isScreenNarrow()) { this.setIndex(1); } var item = this.results[0];alert(item.employees[inEvent.index-1].id); this.$.text1.hide(); var myk = new enyo.kind({name: "ControlSample",kind: "Scroller",components: [{ kind: "onyx.Button", content: "Sign In" }]}); this.$.text1.addContent(myk); this.$.text1.show(); //this.$.text.setContent(items[i].id); this.$.imageSpinner.show(); //var item = this.results[inEvent.index]; }, showList: function() { this.setIndex(0); } }); new ListSample().renderInto(document.body);
Sign In or Register to comment.