Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    ashiso is on a distinguished road

      0  

    Default Setting EventListener on Ext.dom.CompositeElementLite Collection produces TypeError

    Setting EventListener on Ext.dom.CompositeElementLite Collection produces TypeError


    Hi,

    I have a collection of div Elements:
    Code:
    <div class="list-view"> 
       <div class="list-item" style="background: #8dd4be;" id="ext-element-87"> 
           <div class="list-item-inner">
                <div class="task-name">Whiteape</div>
                <div class="task-category">Categorie</div>
            </div>
            <div class="button-bar">
                <div class="left-handle"></div>
                <div class="done"></div>
                <div class="details"></div>
                <div class="timer"></div>
                <div class="delete"></div>
            </div>
        </div>
        <div class="list-item" style="background: #f7e1a5;">
            <div class="list-item-inner">
                <div class="task-name">Vicegold</div>
                <div class="task-category">Categorie</div>
            </div>
            <div class="button-bar">
                <div class="left-handle"></div>
                <div class="done"></div>
                <div class="details"></div>
                <div class="timer"></div>
                <div class="delete"></div>
            </div>
        </div>
        <div class="list-item stub-item">
            <div class="list-item-inner"></div>
        </div>
    </div>
    Which I select via
    Code:
    var listItems = Ext.select(".list-item:not(.stub-item)");
    .. which returns a Ext.dom.CompositeElementLite Collection. I double checked if the select call get's the right elements - which it does. Now if I want to attach an event handler onto each element:
    Code:
    listItems.each(function (el, c, i) {    el.on("dragstart", function () {
            console.log("dragstart on el", this);
        });
    });
    And run the App I get the following error in the console:
    Uncaught TypeError: Cannot set property 'ext-element-87' of undefinedsencha-touch.js:11923

    Which means I cannot set the event handler correctly, right?
    Maybe it's not a bug and I'm doing something wrong? Input on this much appreciated!


    Cheers,
    Alex

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Vote Rating
    818
    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


    What ST2.x.x version are you using? I used your code with ST 2.1.0 and 2.1.1 and I don't get any errors.
    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.

  3. #3
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    ashiso is on a distinguished road

      0  

    Default


    Hi,

    I'm using ST 2.1.0-commercial.

    Here is some more Information:
    The HTML is embedded in an Ext.Panel via the config html property and below try to attach the event listener in an Ext.onReady function:
    Code:
    Ext.define("todon.view.Start", {
        extend: "Ext.Panel",
        xtype: "start",
        
        config: {
            /* more config options [..] */
            html: [
                '<div class="list-view">',
                '    <div class="list-item" style="background: #8dd4be;">',
                '        <div class="list-item-inner">',
                '            <div class="task-name">Whiteape</div>',
                '            <div class="task-category">Kategorie</div>',
                '        </div>',
                '        <div class="button-bar">',
                '            <div class="left-handle"></div>',
                '            <div class="done"></div>',
                '            <div class="details"></div>',
                '            <div class="timer"></div>',
                '            <div class="delete"></div>',
                '        </div>',
                '    </div>',
                '    <div class="list-item" style="background: #f7e1a5;">',
                '        <div class="list-item-inner">',
                '            <div class="task-name">Vicegold</div>',
                '            <div class="task-category">Kategorie</div>',
                '        </div>',
                '        <div class="button-bar">',
                '            <div class="left-handle"></div>',
                '            <div class="done"></div>',
                '            <div class="details"></div>',
                '            <div class="timer"></div>',
                '            <div class="delete"></div>',
                '        </div>',
                '    </div>',
                '    <div class="list-item" style="background: #00bfd6;">',
                '        <div class="list-item-inner">',
                '            <div class="task-name">Test</div>',
                '            <div class="task-category">Kategorie</div>',
                '        </div>',
                '        <div class="button-bar">',
                '            <div class="left-handle"></div>',
                '            <div class="done"></div>',
                '            <div class="details"></div>',
                '            <div class="timer"></div>',
                '            <div class="delete"></div>',
                '        </div>',
                '    </div>',
                '    <div class="list-item stub-item">',
                '        <div class="list-item-inner">',
                '        </div>',
                '    </div>',
                '</div>'
            ].join("")
        }
    });
    
    
    
    Ext.onReady(function () {
        var listItems = Ext.select(".list-item:not(.stub-item)");
        
        window.listItems = listItems;
        
        listItems.each(function (el, c, i) {
            /* ERROR here */
            el.on("dragstart", function () {
                console.log("dragstart on el", this);
            });
        });
    });
    I marked the Line where the Error appears with the "ERROR here" comment.

    More tests in the console:
    Code:
    listItems
    
    Class
    • el: Class
    • elements: Array[3]
    • __proto__: Object
    listItems.elements [
    • <div class=​"list-item" style=​"background:​ #8dd4be;​">​…​</div>
    ,
    • <div class=​"list-item" style=​"background:​ #f7e1a5;​">​…​</div>
    ,
    • <div class=​"list-item" style=​"background:​ #00bfd6;​">​…​</div>
    ]
    listItems.item(0) Class
    • classList: Array[1]
    • dom: div.list-item
    • hasClassMap: Object
    • id: ""
    • isSynchronized: true
    • __proto__: Object
    listItems.item(0).on("dragstart", function () { console.log("dragstart on el", this);}) TypeError: Cannot set property 'ext-element-88' of undefined
    By the way: Is ST 2.1.1 stable? When I request a download link I still get 2.1.0 ..

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    10
    Vote Rating
    0
    ashiso is on a distinguished road

      0  

    Default


    I get the same problem when I put the code from the onReady() function inside a controllers launch function:
    Code:
    Ext.define("todon.controller.Tasks", {    extend: "Ext.app.Controller",
        
        config: {
            stores: ["Tasks"]
        },
        
        launch: function () {
            console.log("launch!");
            
            var listItems = Ext.select(".list-item:not(.stub-item)"),
                start = Ext.getCmp("start");
            
            window.listItems = listItems;
            window.start = start;
            
            listItems.each(function (el, c, i) {
                
                el.on("dragstart", function () {
                    console.log("dragstart on el", this);
                });
            });
        }
    });

Thread Participants: 1