View Full Version : dynamic button creation in JsonView

24 Apr 2007, 10:10 PM

I'm currently learning how to use extjs and have already come quite far. I've got a layout with several nested panels, three of which are based on JsonView, fetching dynamic data from the server. This data is displayed as a list, built from <div>s. Clicking list items will correctly launch actions to update other lists.

Now I wanted to add buttons to these list items, which are only displayed while your mouse is over the item. I've successfully done that by adding onMouseOver/Out events to the view. On the picture you can see the add/play button as they're displayed.

But I've got two (at least :-)) issues:

- the icons flicker, as soon as I move the mouse cursor over the icon. It seems as if in that moment I was leaving the item's div, which leads to its removal. Which, in turn, makes me enter the item etc. etc. I hope you see what I mean.

- when clicking one of these two icons, neither their action (onClick) nor the link is executed, but it's the same as if I had clicked the list item.

In short: my approach doesn't work. What am I doing wrong? How would you do what I want to do?



25 Apr 2007, 6:38 AM
Some more information on this... The code for what is shown in the picture is something like this:

<div id="81" class="browseItem">Aerosmith
<span id="artist.81" class="browsedbRightControls">
<a href="somefile.html">
<img src="/default/html/images/b_play.gif"/>

But that link doesn't work. When I click it, nothing happens. If I move the span out of the div, it would work - but the layout's lost.

I've been using that combination of span and div in other places successfully, but it just doesn't work within my extjs layout. Any idea?


25 Apr 2007, 7:38 AM
My guess would be that the view's item(row) click event is capturing the event and preventing propagation. Not sure without seeing code though - can you post a link or sample?

25 Apr 2007, 7:54 AM
You're probably right: I do indeed capture the click event. I hope the code snippet is complete enought to see what I'm doing (all this is integrated in a lot of nested panels).

Main = function(){
return {
init : function(){
var albumsView = new SlimBrowseView('albums', 'album');

albumsView.on("click", function(vw, index, node, e){

Ext.EventManager.onDocumentReady(Main.init, Main, true);

SlimBrowseView = function(container, type, all){
this.type = type;
this.all = all ? all : null;

var tpl = "<div id=\"{id}{year}\" class=\"browseItem\">{myItem}{" + this.type + "}<span id=\"" + type + ".{id}{year}\" class=\"browsedbRightControls\"></div>";

SlimBrowseView.superclass.constructor.call(this, container, tpl, {
jsonRoot: '@' + this.type + 's',
singleSelect: true,
selectedClass: 'selectedClass'

this.events["mouseover"] = true;

"mouseover": this.onMouseOver,
scope: this

Ext.extend(SlimBrowseView, Ext.JsonView, {
type : '',
sort : '',
tags : '',
filterIDs : {},
currItem : null,

onMouseOver : function(e){
var item = this.findItemFromChild(e.getTarget());
if (this.currItem) { this.currItem.update(''); }
this.currItem = Ext.get(this.type + '.' + item.id);
this.currItem.update('<a href="http://www.somewhereinthe.net"><img src="/default/html/images/b_play.gif"></a>');

I even tried disabling the ...on('click'...) part, without success. Thanks!


25 Apr 2007, 8:17 AM
Does your click handler get called when you click the link? If so, I would think you could check the target. If it's the link, let it go, otherwise call stopEvent and do whatever you would do for a row click.

25 Apr 2007, 1:01 PM
Does your click handler get called when you click the link?

No, only if I miss the image. I'll investigate your idea, though. Thanks!

27 Apr 2007, 6:16 AM
Hey, I can't click _any_ link (<a href="...") within that view. Is this a feature?

27 Apr 2007, 7:54 AM
Can somebody please tell me what I have to read to understand this? Anything but pure text doesn't seem to be working within a view?!?

I have a view. An element within that view looks like this:

<div id="447" class="browseItem">Afro Celt Sound System</div>

That's fine, clicking this item will launch the "onclick" action. But if I replace that text with a graphic:

<div id="24" class="browseItem selectedClass">
<img id="playitem" class="browsedbRightControls" src="/default/html/images/b_add.gif"/>

Nothin happens when clicking the image. Interestingly it does work, when I click in the empty space next to the graphic. What's wrong with this simple example?

Thanks in advance for any input.


10 Sep 2007, 1:43 PM
I had the same problem with the href not working with the following code:

// initialize the View
this.view = new Ext.JsonView(this.panel.el, this.newsItemTemplate, {
singleSelect: true,
jsonRoot: '',
emptyText : '<div style="padding:10px;">No news loaded</div>',
selectedClass: ''

However when I changed it to match this it worked:

// initialize the View
this.view = new Ext.JsonView(this.panel.el, this.newsItemTemplate, {
jsonRoot: '',
emptyText : '<div style="padding:10px;">No news loaded</div>'