Potential bug with BasicDialog? - Ext JS

I was having issues with passing the element directly to the constructor of basic dialog, but everything worked when I gave the element an id and passed the string of the id to the constructor. I have a screenshot of what happens when I pass the element directly.

	var listElement = document.createElement('ul');
	var responseFunction = function responseFunction(response){
		XMLResponse = response.responseXML
		var titles = XMLResponse.getElementsByTagName("title");
		for (var i = 0; i < titles.length; i++){
			var listId = XMLResponse.getElementsByTagName("listid")[i].childNodes[0].nodeValue;
			var title = XMLResponse.getElementsByTagName("title")[i].childNodes[0].nodeValue;
			var opt = document.createElement('li');
			listElement.appendChild(opt);
			opt.setAttribute('listId',listId);
			opt.appendChild(document.createTextNode(title));
			opt.onclick = function () {
				var flashMovie = getFlashMovieObject("mp3player"); 
				addSong(this.getAttribute('listId'),flashMovie.GetVariable("/:trackId"));
			};
		}
	var divElement = document.createElement('div');
	divElement.setAttribute("class","dialogContent");
	divElement.setAttribute("id","playlistDialog");
	var titleElement = document.createElement('div');
	titleElement.setAttribute("class","x-dlg-hd");
	titleElement.appendChild(document.createTextNode('Add to a Playlist'));
	divElement.appendChild(titleElement);
	var contentElement = document.createElement('div');
	contentElement.setAttribute("class","x-dlg-bd");
	contentElement.appendChild(listElement);
	divElement.appendChild(contentElement);
	document.body.appendChild(divElement);
	dialog = new Ext.BasicDialog(listElement, {
   		modal:true,
   		draggable: false,
		resizable: false,
   		width:500,
   		height:300,
  		minWidth:300,
   		minHeight:300
   	});
   	dialog.addButton('Submit', dialog.hide, dialog).disable();
   	dialog.addButton('Close', dialog.hide, dialog);
   	dialog.show(parentNode);

#2   03-05-2007, 12:39 PM

#3   03-05-2007, 12:55 PM

Not sure why you'd want to do all that work yourself - you can use autoCreate:true to tell the Dialog to create all the HTML for you. Also why are you rendering the dialog to a UL element? You might try using Firebug to compare the generated HTML of your approach vs what happens when you use autoCreate, or what's built when you just point it to a div and let it build all the child elements. __________________ Tim Ryan - Ext JS Support Team Read BEFORE posting a question / posting a Bug Use Google to Search - API / Forum API Doc (3.x | 2.x | 1.x) / FAQ / Wiki / Tutorials / 1.x->2.0 Migration Guide

#4   03-05-2007, 01:04 PM

I'm new to Ext. Can you explain? Basically, I'm just creating an unordered list based on the data and making that the content of the dialog. It should actually be divElement because I tried placing it within a div to see if that made a difference but it didn't. I've switched over to JSON, so that bit actually look like this: var playlists = eval(response.responseText); for (var i = 0; i < playlists.length; i++){ var listId = playlists[i]['listid']; var title = playlists[i]['title']; var opt = document.createElement('li'); listElement.appendChild(opt); opt.setAttribute('listId',listId); opt.appendChild(document.createTextNode(title)); opt.onclick = function () { addSong(this.getAttribute('listId'),currentSong['trackid']); dialog.hide(); }; }

#5   03-05-2007, 02:31 PM

This is one of the common uses for the Template functionality. Take a look at this blog post - it actually has examples that build lists like you're doing - note that it still uses the .33 syntax, so you'll have to replace things like YAHOO.ext with Ext. http://www.jackslocum.com/blog/2006/...-or-templates/ I would also recommend looking thru downloaded examples - you'll find more uses of templates and also wiring a single click handler, rather than one for each 'LI'. Once you have it working in a div, it should be simple to append it to a Dialog instead - note that you append to the dialog.body, not the dialog. __________________ Tim Ryan - Ext JS Support Team Read BEFORE posting a question / posting a Bug Use Google to Search - API / Forum API Doc (3.x | 2.x | 1.x) / FAQ / Wiki / Tutorials / 1.x->2.0 Migration Guide