在 Sencha Touch 1.1 的 Ext.List 中添加监听器到自定义元素

Question

我正在尝试使用 -/+ 按钮制作一个列表。列表中的每个项目都有这对按钮。我正在尝试将侦听器添加到按钮元素（实际上它们是 Div），但到目前为止运气最低。

到目前为止，我所做的是捕获列表的 'beforerender' 事件，遍历所有列表元素并为每个项目添加一个 click 监听器名单。但问题是，当我导航到另一个屏幕/面板和列表的后面时，不会引发 beforeerender 事件。因此新列表项的侦听器未注册。

我尝试了一种解决方法，并在面板的每个 'beforeactivate' 事件上强制列表刷新。但这会导致列表刷新 4-5 次（不知道为什么）。

我一定走错了路……也许解决方案是自定义组件，但自定义组件的文档很差。

Answer 1

好的，我已经找到了解决方案，对于任何有同样问题的人：

我捕获了 Panel 的 activate 和 beforeactivate 事件，并通过使用列表上的 id 检索对列表的引用（例如：lstProducts），然后通过 this.down('#productsList'); 获取它。

更新

这是列表的模板，以及列表和设置侦听器的方法。

列表的模板

    productsTemplate = new Ext.XTemplate(
            '<tpl for=".">' +
                '<table width="100%" cellpadding="0" cellspacing="0"><tr>' +
                '<td>' +
                '<div class="product">{Name}</div>' +
                '</td>' +
                '<td rowspan="2" width="10%" align="right">' +
                '<table cellpadding="0" cellspacing="0">' +
                '<tr><td><div class="btn btnOrder minus" id="btnRemove{#}" > - </div></td> ' +
                '<td><input type="text" disabled id="pr-{Id}" value="0" class="productQuantity"/> </td>' +
                '<td><div class="btn btnOrder plus" id="btnAdd{#}"> + </div></td></tr></table> ' +
                '</td></tr><tr><td>' +
                '<table class="orderExtra"><tr>' +
                '<td class="sideOrderIcon" id="prSideOrderIcon-{Id}">&nbsp;</td>' +
                '<td valign="middle"><input type="text" disabled id="prSideOrder-{Id}" value="0" class="extraQuantity"/></td>' +
                '<td class="extraIcon" id="prExtraIcon-{Id}">&nbsp;</td>' +
                '<td><input type="text" disabled id="prExtra-{Id}" value="0" class="extraQuantity"/></td>' +
                '<td class="price">{Price} €</td>' +
                '</tr></table>' +
                '</td></tr>' +
                '</table>' +
                '</tpl>'
        );

列表本身和在视图激活时设置的动作侦听器。

productsList = new Ext.List({
            store:this.store,
            scope:this,
            refreshed:false,
            id:'productsList',
            disableSelection:true,
            itemTpl:productsTemplate })

Ext.apply(this, {
            layout:'fit',
            scroll:'vertical',
            items:[productsList],
            listeners:{
                activate:this.setupQuantityActionListeners
            }

在代码的其他部分放置以下方法。

setupQuantityActionListeners:function () {
    var panel = this.down('#productsList');
    // loop all the list items to add listeners to the buttons
    panel.all.elements.forEach(function (item, index) {
        //get the button references
        var btnAdd = Ext.get('btnAdd' + (index + 1));
        var btnRemove = Ext.get('btnRemove' + (index + 1));
        //get the product model
        var product = app.stores.Products.getAt(index);
        var tbxQuantity = Ext.get('pr-' + product.data.Id);
        //get the running quantity
        if (tbxQuantity)
            var quantity = tbxQuantity.getValue();
        //add - remove quantity
        if (btnAdd) {
            btnAdd.on('click', function () {
                tbxQuantity.dom.value = ++quantity;
                Ext.dispatch({
                    controller:'Orders',
                    action:'addOrderItem',
                    product:product,
                    quantity:quantity
                })
            })
        }
        if (btnRemove) {
            btnRemove.on('click', function () {
                if (quantity > 0) {
                    tbxQuantity.dom.value = --quantity;
                    Ext.dispatch({
                        controller:'Orders',
                        action:'addOrderItem',
                        product:product,
                        quantity:quantity
                    })
                }
            })
        }
    });
}

总体上要非常小心范围界定。如果你想从视图中获取一些东西并且你试图在一个组件的监听器方法中获取它，你必须给那个组件设置scope:this，以便在组件的监听器方法中获取视图的引用。

希望对你有帮助