Problem with applyStyle

edited March 2012 in Enyo 2
Hey Guys,

New to Enyo but a long time mobile programmer (mainly PalmOS years ago). I'm working an app I've had in the works on various frameworks over the years and have wound up with Enyo (loving it so far). Here's what's going on: I have a custom field control that has the option to feed it a list of items then when you click the search magnifying glass those options appear below the field. The problem I am having is that when the magnifying glass is clicked the applyStyle command doesn't apply however everything else in that event is handled. Here's the code:

(Using the new Beta 3, originally tried in Beta 2)
enyo.kind({
	name: "Task_Field",	
	kind: "enyo.Control",
	published: {
		label: "",
		showmag: false,
		value: "",
		list: [ ]
	},
	components: [
		{content: "", name: "edit_label", classes: "edit_label"},
		{kind: "onyx.InputDecorator", content: "Profile", classes: "edit_input", components: [
			{kind: "onyx.Input", name: "edit_input"},
			{kind: "onyx.IconButton", name: "edit_mag", src: "source/search-input-search.png", style: "float: right;", ontap: "taptest"}
		]},
		{tag: "div", name: "edit_list", classes: "profile_popup"},
	],
	create: function(){
		this.inherited(arguments);
		this.labelChanged();
		this.showmagChanged();
		this.listChanged();
		if(this.list.length == 0){
			this.$.edit_mag.applyStyle("display","none");	
		}
		this.$.edit_list.applyStyle("display","none"); //This fires correctly (makes the lists disapear)
	},
	taptest: function(){
		alert("test"); //This fires
		this.$.edit_list.applyStyle("display","block"); //This does not (supposed to make the list appear)
		this.$.edit_input.hasNode().value = "test"; //This also fires
	},
	labelChanged: function(){
		this.$.edit_label.setContent(this.label);
	},
	showmagChanged: function(){
		if(!this.showmag){
			//this.$.edit_mag.applyStyle("display","none");
		}
	},
	listChanged: function(){
		if(this.list.length > 0){
		var i = 0;
			for(i=0; i
I'm sure it's a rookie mistake and I appreciate any help I can get. Thanks.

Comments

  • edited March 2012
    In your listChanged handler, shouldn't you be using this.$.edit_list.createComponent?

    Currently you're adding components to the root container of the kind (i.e. appending to the components block).

    EDIT: Actually it's hard to tell. Please wrap the code in a <pre><code> block and double check your for loop as it appears to have been garbled.
  • I just came back to see if I could edit my post to properly wrap the code but it appears someone else already did it for me, so thank you. To clarify: There aren't any problems with adding the components, that part works perfectly. The problem I am having is hiding the box then showing it again. This code: this.$.edit_list.applyStyle("display","block"); is not firing for some reason when I tap the magnifying glass, yet the alert is. If I paste that same code into the create handler it'll work just fine. It's really baffling to me.
  • You can call .show and .hide methods on the control directly.

    See http://enyojs.com/api/#enyo.Control::show and http://enyojs.com/api/#enyo.Control::hide
  • I just discovered the .show and .hide methods and am using them now. So here is where the root of my problem really is: The edit_list divs that have the items created in them don't let me apply styles, show, hide, etc. The ones that don't have any items in them (just a blank div) show/hide just fine. So it has something to do with the controls being created. I changed the code to this.$.edit_list.createComponent how omastudios showed but it didn't make a difference.
  • Alright, problem solved. Much thanks to Tibfib in the IRC channel. He pointed out that my render() call should be in a setTimeout function. So I've replaced this.$.edit_list.render() with

    var renderFunc = enyo.bind(function(){ this.$.edit_list.render();}, this);
    setTimeout(renderFunc, 0);

    Now everything works 100%
Sign In or Register to comment.