Results 1 to 4 of 4

Thread: Find div element created inside tpl

  1. #1

    Default Find div element created inside tpl

    Hi,

    I am adding before tpl for a combo box initialize:

    tpl = Ext.create('Ext.XTemplate',
    '<div id="selectalldiv">' + me.selectAllLabel + '</div>',
    '<tpl for=".">',
    '<div class="x-boundlist-item value-bound-list-'+"{[xindex % 2 === 0 ? 'even' : 'odd']}"+'">',
    '<span class="combo-box-bound-list">{'+me.displayField+'}</span>',
    '</div>',
    '</tpl>');

    Then added a click handler for the div:

    Ext.apply(combo, {
    listConfig: {
    listeners: {
    el: {
    click: {
    delegate: 'div#selectalldiv',
    fn: function(ev, element) {
    console.log('******in select all click***********');
    }
    }
    }
    }
    }
    });


    I want to write a method to invoke this click event. Issue is I am not able to find the div element. I tried document.getElementById and others. They all return null.

    Please help!!!

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    My first thought is that you should stay clear of ids, use a CSS class instead. Also, does it 'work' as expected if you remove the delegate selector completely?

    I suggest putting together a Sencha Fiddle so we can see exactly what you're doing.

  3. #3

    Default Updates

    Thanks for your response. I am new to Ext JS and JS world. I am trying to create a multi-select combobox with (Select All) option. I am facing two issues with the below code:

    1. If I try to add CSS class "x-boundlist-item" then I get error "Uncaught TypeError: Cannot read property 'internalId' of undefined" while opening the combo. I avoid styling while initialize for now.
    2. Main issue for me is unable to locate the "selectall" element outside the click event.

    I tried removing the delegate still same issue.

    Below is the complete code on the control:

    Ext.define('My.view.controls.ComboMultiSelect', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.combomultiselect',
    multiSelect: true,
    editable: false,
    selectAllLabel: '(Select All)',
    deSelectAllLabel: '(Deselect All)',
    selectAllHtml: '<div class="x-boundlist-item">' + '<span class="combo-box-bound-list">(Select All)</span>' + '</div>',
    deSelectAllHtml: '<div class="x-boundlist-item x-boundlist-selected">' + '<span class="combo-box-bound-list">(Deselect All)</span>' + '</div>',
    selectAllEl: '',
    tpl: '',
    displayField: 'field1',
    valueField: 'field1',
    initComponent: function () {
    var me = this;
    me.callParent(arguments);


    if (!me.tpl) {
    if (me.displayField) {
    me.tpl = Ext.create('Ext.XTemplate',
    '<div class="selectalldiv">' + me.selectAllLabel + '</div>',
    '<tpl for=".">',
    '<div class="x-boundlist-item value-bound-list-' + "{[xindex % 2 === 0 ? 'even' : 'odd']}" + '">',
    '<span class="combo-box-bound-list">{' + me.displayField + '}</span>',
    '</div>',
    '</tpl>');
    }
    }
    me.on('afterrender', me.attachSelectAllListener, me);
    me.on('select', me.onSelectItem, me);


    },
    attachSelectAllListener: function (combo) {
    var me = this;
    Ext.apply(combo, {
    listConfig: {
    listeners: {
    el: {
    click: {
    delegate: '.selectalldiv',
    fn: function (ev, element) {
    me.selectAllEl = element;
    if (me.selectAllEl.innerHTML === me.selectAllHtml ||
    me.selectAllEl.innerHTML === me.selectAllLabel) {
    combo.select(combo.getStore().getRange());
    me.selectAllEl.innerHTML = me.deSelectAllHtml;
    } else {
    combo.select('');
    me.selectAllEl.innerHTML = me.selectAllHtml;
    }
    }
    }
    }
    }
    }
    });
    },
    onSelectItem: function (combo, records) {
    var me = this;
    if (records.length === combo.getStore().getCount()) {
    me.selectAllEl.innerHTML = me.deSelectAllHtml;
    } else {
    me.selectAllEl.innerHTML = me.selectAllHtml;
    }
    },
    SelectAll: function (ev, element) {
    // How to reference the select all class/div element here?
    }
    });

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Answers
    585

    Default

    Please provide a Fiddle:

    https://fiddle.sencha.com/
    https://www.sencha.com/forum/showthr...hin-the-forums

    It's quite difficult to read your code because you haven't wrapped it in [CODE] tags. At first glance your use of innerHTML looks highly dubious - use the update method to set it and never rely on reading it.

    It's not immediately clear why you're using an afterrender listener either.

    You also might want to consider subclassing BoundList rather than trying to poke in a lot of customizations from the combobox.

Similar Threads

  1. Find Tabbed Pane created using extjs 2.3.0
    By RichaSud in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 29 May 2013, 5:44 AM
  2. Replies: 3
    Last Post: 26 Oct 2012, 7:30 AM
  3. Viewport inside form element, insted of body element
    By ncardeli in forum Ext 2.x: Help & Discussion
    Replies: 17
    Last Post: 19 Mar 2010, 7:11 PM

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
  •