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 - Sr Software Engineer 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
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  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