Question

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

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

我尝试在面板的每个' 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设置为该组件，以便在组件的侦听器方法内部获取视图的引用。

希望有所帮助

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

1 个答案: