1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    jmartinez40 is on a distinguished road

      0  

    Default Answered: ComboBox custom template - how do I attach a click handler

    Answered: ComboBox custom template - how do I attach a click handler


    I have constructed a ComboBox with a custom Template. Inside this template I have anchor links for which I need to handle the 'click' event. I don't know if this is the best way to implement such functionality, so if there is a better way I am all ears.
    ComboBox-Tpl.jpg
    Last edited by jmartinez40; 2 Dec 2011 at 9:12 AM. Reason: Code was missing

  2. You should be able to specify listeners in the listConfig of the combobox. They will then apply to the drop-down.

    I think you've misunderstood Mitchell's example. He's using event delegation. That involves attaching a single listener to the whole list. The delegate setting then ensures that your listener only fires when a suitable element is clicked. Using this technique there's no need to bind to each row in the list, in fact it will even cope when the contents of the list changes.

    I haven't tried it but you could probably do something like this...

    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listConfig: {
            listeners: {
                el: {
                    click: {
                        delegate: 'a.iol-combo-list-item-action',
                        fn: function(ev, anchor) {
                            ...
                        }
                    }
                }
            }
        }
    });
    Check out the docs for these settings for more info.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,731
    Answers
    3362
    Vote Rating
    754
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    cmp.mon(cmp.el, {
        scope : cmp,
        delegate : 'a.iol-combo-list-item-action', //I think I have that class right
        click : function() {
            console.log(arguments);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    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.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    2
    Vote Rating
    0
    jmartinez40 is on a distinguished road

      0  

    Default


    Mitchell,

    I appreciate your prompt response. Unfortunately this does not get me there - my fault as I did not provide the necessary details. (

    I am in the process of migrating from 3.4 to 4.0.

    Basically I am working with a ComboBox with queryMode='remote', minChars=2, and queryDelay=500 which means the list gets updated often. As a matter of efficiency I do not want to bind a 'click' handler to all anchors on the list at once. I want to bind handlers only to the row currently highlighted - most of the time users click an item close to the top. Below is my In 3.4 code, which does what I need:

    Code:
        // Ext JS 3.4 code...
    
            onComboBoxAfterRender: function (combo) {
                combo.focus();
                combo.view.on('selectionchange', this.onComboBoxViewSelectionChange, this);
            },
            onComboBoxViewSelectionChange: function (view, selections) {
                if (selections.length > 0) {
                    this.searchHelperDisplayField.setValue(this.viewReportText);
                    var list = Ext.DomQuery.select(".iol-combo-list-item-action", selections[0].id);
                    for (var i = 0; i < list.length; i++) {
                        var el = Ext.get(list[i].id);
                        el.un('click', this.onComboBoxActionClick, this);
                        el.on('click', this.onComboBoxActionClick, this, { single: true });
                    }
                }
            }
    As you can see after the ComboBox has been rendered, I am relying on being able to bind to the 'selectionchange' event on the underlying view (combo.view.on('selectionchange') which allowed me to work on one row at the time. Ext JS 4.0.7 object model does not seem to expose the underlying list (picker - Ext.view.BoundList). Is there a way to replicate the 3.4 behavior on 4.07?

    Ok, let's assume worst-case-scenario, I cannot bind one row at the time because I cannot access the underlying list object. I still need to bind to the list everytime it is created- and by looking at the Ext JS source code (ComboBox.js and Picker.js) I see the list is not created until after the ComboBox.expand event. I tried to bind from the 'expand' event, as illustrated in the code below, but the query returns empty since the list's DOM has not been rendered.

    Code:
        // Ext JS 4.07 code...
    
        onIndexComboExpand: function (combo, options) {
            Iol.log('onIndexComboExpand');
            var list = Ext.ComponentQuery.query("iolcoresearchcombobox .iol-combo-list-item-action");
        },
    I hope I am making sense.

    Thank you in advance,
    Miguel
    Last edited by jmartinez40; 2 Dec 2011 at 3:32 PM. Reason: Typo in the source code provided

  5. #4
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,343
    Answers
    498
    Vote Rating
    249
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    You should be able to specify listeners in the listConfig of the combobox. They will then apply to the drop-down.

    I think you've misunderstood Mitchell's example. He's using event delegation. That involves attaching a single listener to the whole list. The delegate setting then ensures that your listener only fires when a suitable element is clicked. Using this technique there's no need to bind to each row in the list, in fact it will even cope when the contents of the list changes.

    I haven't tried it but you could probably do something like this...

    Code:
    Ext.create('Ext.form.field.ComboBox', {
        ...
        listConfig: {
            listeners: {
                el: {
                    click: {
                        delegate: 'a.iol-combo-list-item-action',
                        fn: function(ev, anchor) {
                            ...
                        }
                    }
                }
            }
        }
    });
    Check out the docs for these settings for more info.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar