Как добавить кнопку в TPL

Question

Я не уверен, возможно ли это, но у меня есть приложение, которое не выполняет то, что я хочу.Сначала он отображает список ресторанов из базы данных на панели.

tpl: [
   '<tpl for=".">',
       '<div="my_div"><h2>{restaurant_name}</h2></div>',
   '</tpl>'
]

, это работает правильно и дает мне список моих ресторанов.Теперь встает вопрос.Я хочу добавить кнопку, чтобы «my_div» нажимал на другую панель.Я могу сделать это с закрепленным элементом, но эта идея не сработает, так как вы можете щелкнуть по любому ресторану и получить их информацию.

Я предполагаю, что мне нужно как-то вызвать обработчик событий (с которого я могу работатьпристыкованный предмет).Я в основном застрял в том, как добавить кнопку в шаблон, и помощь sencha в этой теме бесполезна.

У меня есть обработчики событий, которые выглядят так:

var restaurantListHandler = function(button,event){
    mainPanel.setActiveItem(restaurantList, {type: 'slide', direction: 'right'});
}

Спасибо

Эрик

Answer 1

Если я правильно вас понимаю, вы ищете:

1. кнопка для добавления в шаблон
2. обработчик событий, привязанный к этой кнопке, отличный от того, к которому привязаны другие элементы списка
3. кнопка должна быть в самом списке; это не может быть отдельный кусок
4. обработчик события кнопки должен направить ее на новую страницу, а не на действие других элементов списка, которые являются его родными элементами

Это все правда?

Если да, я бы бросил в ваш обработчик событий списка условие, которое проверит класс или идентификатор элемента (в зависимости от того, какой из них легче / легче всего) и, найдя его, заставит его выполнить другое действие, Например, , перейдите на следующую страницу. Вроде как jQuery.live () или других делегатов. Дайте мне знать, если вам нужно, чтобы я уточнил.

Если нет, я бы сказал, посмотрите на мой номер 3; кнопка обязательно должна быть в списке? Если это связано с каждым элементом, то мы бы сделали одно, а если нет, мы бы хотели сделать другое. Поэтому мне нужно знать это прежде всего, прежде чем я смогу полностью ответить. Если это должно быть там, см. Выше. Если его не должно быть в списке, я бы вынул его из списка и объявил бы его как новый компонент. Оттуда вы сможете указать обработчик в конфигурации, например

items: { xtype: 'button', handler: goAwesomePlaces }

где goAwesomePlaces - ваш обработчик.

Answer 2

Вы можете использовать опцию onItemDisclosure из Ext.List:

http://docs.sencha.com/touch/1-1/#!/api/Ext.List-cfg-onItemDisclosure

Демонстрация находится на кухонной раковине Sencha Touch в разделе Интерфейс пользователя / Список / Раскрытие:

http://dev.sencha.com/deploy/touch/examples/kitchensink/

var serviceList = new Ext.List({
            id: 'servicelist',
            blockRefresh: true,
            pinHeaders: false,
            itemTpl: serviceTemplate,
            grouped: true,
            indexBar: false,
            singleSelect: true,
            allowDeselect: false,
            showAnimation: 'slide',
            store: serviceStore,
            emptyText: L10N[lang].msg.no_services,
            multiSelect: false,
            itemCls: 'servicemain',
            cls: 'background',
            onItemDisclosure: function(record, btn, index) {
          Ext.Msg.alert('Service', 'Name: ' + record.get('service'), Ext.emptyFn);
      }
    });

Answer 3

Если вы хотите что-то вроде: Список с кнопкой на каждом элементе. тогда вот моя реализация того же

var asListItemTpl = new Ext.XTemplate(
                              '<tpl for=".">',
                              '<div class="sb-section-title">{label}</div>',
                              '<div class="as-button"><input type="button" id="btn{id}" value="btn{id}" width="12px"> </div>',
                              '</tpl>'
                              );

Надеюсь, это имеет смысл.

Answer 4

Может быть, вы можете использовать что-то вроде:

onclick="javascript:selectRestaurant(\'{Id}\');"

на div или (что я когда-то делал) на изображении и имеют глобальную функцию selectRestaurant.
Id будет тогда полем базы данных, которое однозначно идентифицирует ресторан.