View Full Version : sencha 3.4 how to add event to dataview item in sencha sample

5 Nov 2012, 12:52 PM

I need to create a search panel and I took as basis the Custom Search Fields sample from EXT JS 3.4 (due to legacy with my customer).
It receives items through a webservice and puts them in an itemlist via a dataview, with a template.

What I want is to add an action to each item enabling a window with extra details about the item.

I've been surfing but cannot find a solution which works for me. I know that I need to use a listener, but have not been able to turn the various samples into a success,

This is the code I use (which is basically the same as provided in the sample):

// Custom rendering Template for the View var resultTpl = new Ext.XTemplate( '<tpl for=".">', '<div class="search-item">', '<h3><span>{lastPost:date("M j, Y")}<br />by {author}<br /></span>', '<a href="http://extjs.com/forum/showthread.php?t={topicId}&p={postId}" target="_blank">{title}</a></h3>', '<p>{excerpt}</p>', '</div></tpl>' ); var panel = new Ext.Panel({ applyTo: 'search-panel', title: 'JOBS2 Matching Engine', bodyStyle: 'padding:5px 5px 0', height: 700, autoScroll: true, items: new Ext.DataView({ tpl: resultTpl, store: ds, itemSelector: 'search-item', listeners: { <this is where a listener should be> } } //end of listener }), tbar: [ 'Zoekopdracht: ', ' ', new Ext.ux.form.SearchField({ store: ds, width: 900 }), { text: 'zoekhulp', width: 90, fontsize: 12, enableToggle: true, handler: function () { // create the window on the first click and reuse on subsequent clicks if (!win) { win = new Ext.Window({ applyTo: 'hello-win', layout: 'fit', width: 900, height: 500, closeAction: 'hide', plain: true, items: new Ext.TabPanel({ applyTo: 'hello-tabs', autoTabs: true, activeTab: 0, deferredRender: false, border: false }), buttons: [{ text: 'Submit', disabled: true }, { text: 'Close', handler: function () { win.hide(); } }] }); } win.show(this); } } ], bbar: new Ext.PagingToolbar({ store: ds, pageSize: 20, displayInfo: true, displayMsg: 'Topics {0} - {1} of {2}', emptyMsg: "No topics to display" }) });I am looking for some practical code and tips to get this to work.It is all in the listener, but none of the samples reacted (eg in the console).Which code should I put where?Your help is very much appreciated!!Henk Jelt

7 Nov 2012, 8:35 AM
I cannot read your code. You need to make sure it's legible and use BBCode CODE tags.

So you want to take action when an item is clicked on?

8 Nov 2012, 4:51 AM
Hi Mitchell

thanks for replying.
I copied / pasted the code from Visual Studio, which normally goes well.
Apparently it was stored wrongly in your database.
Anyway. the code itself is basically the code behind this example:sencha/examples/form/custom-access.htmlas provided by Sencha in the set of examples in the download package of 3.4.

It basically contains a panel with a top bar, a bottom bar and a set of items.

The items are populated from a store which is filled with items of a webservice from your side.
The items are subject to a template.

What I want to achieve is a click/doubleclick event on each item (either via a button in the template or by clicking on the row itself), leading to a window opening up.

For this I need a listener, and a function conneted to the listener.
I have already tried to put a listener in the panel, in the dataview, but also outside the panel by initialising the dataview outside the panel, and then definining dataview.on('click', function() ..).
Up till now without result.

I am hoping that you would take a look at the sample code, and help me with some practical code how to achieve what I want.

It could be very simple: some code creating an alert when I click on the row is already very welcome.

I tried to copy / paste the code again, but this editor mixes things up.
I have attached a text file with the code.
I hope that is sufficient?

Can you help me out?


Henk Jelt