добавить слушателей к пользовательским элементам в Ext.List в Sencha Touch 1.1 - PullRequest
Новая
       28

добавить слушателей к пользовательским элементам в Ext.List в Sencha Touch 1.1

1 голос
/ 28 декабря 2011

Я пытаюсь составить список с помощью кнопок - / +.Каждый элемент в списке будет иметь эту пару кнопок.Я пытаюсь добавить слушателей к элементам кнопки (на самом деле это Div), но пока с минимальной удачей.

На данный момент я перехватил событие ' beforerender ' списка, перебрал все элементы списка и добавил слушатель click для каждого элементав списке.Но проблема в том, что когда я выхожу на другой экран / панель и обратно в список, событие beforerender не генерируется.Поэтому слушатели новых элементов списка не зарегистрированы.

Я попытался обойти и заставить список обновляться при каждом ' перед активацией ' события панели.Но это приводит к тому, что список обновляется 4-5 раз (не знаю почему).

Я должен пойти по этому пути неправильно ... Возможно, решение - это пользовательский компонент, но документация по пользовательским компонентам довольно скудная.

1 Ответ

1 голос
/ 30 декабря 2011

Хорошо, я нашел решение для тех, у кого такая же проблема:

Я перехватил события Panel на панели activate и beforeactivate и извлекаю ссылку на список, используя идентификатор в списке (например, 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 для этого компонента, чтобы получить ссылку на представление внутри метода слушателя компонента.

Надеюсь, это поможет

...