Results 1 to 3 of 3

Thread: sencha 3.4 how to add event to dataview item in sencha sample

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Vote Rating

    Default sencha 3.4 how to add event to dataview item in sencha sample


    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="{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(); } }] }); }; } } ], 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

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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?
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Vote Rating

    Default followup

    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 exampleencha/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
    Attached Files Attached Files

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts