Загрузите HTML-данные с AJAX в сенсорном Сенча, когда панель отображается

Question

У меня есть TabPanel с вкладкой и четырьмя панелями внутри. Я хочу загрузить содержимое HTML для четвертой панели с помощью вызова AJAX, когда панель станет видимой.

Функция AJAX извлекает данные с сервера и помещает их в панель, которая использует функцию обновления панели. Проблема в том, как вызвать эту функцию, когда панель становится видимой. Упрощенная версия:

Pages.Contact = new Ext.Panel({

    title: 'Contact',
    html: 'test data',
    iconCls: 'user',
    cls: 'cHome',

    activate: function () {
        Pages.Contact.update("my ajax data");
    }

});

Когда я захожу на свою панель, содержание тела не изменяется. Кто-нибудь знает, что здесь не так? Я уже пытался заменить активацию на рендер и шоу.

Answer 1

Чтобы добавить слушателей события, вам нужно сделать

    listeners: {
                activate: function(){
                 console.log('activate fired');
                } 
   },

Но это не то событие, которое вы хотите слушать. Лучше прослушивать переключатель beforecards на объекте TapPanel, например:

    listeners: {
                beforecardswitch:function(newCard, oldCard, index, anim){
                  if(index == 3){
                     //loadJson and update card.
                      // you may want to use this also 
                      newCard.setLoading(true);
                      //and after the json request has finished set it to false.
                    }             
                }
    },

Answer 2

Решение было использовать:

beforecardswitch:function(object, newCard, oldCard, index, anim) {

Как показано Ilya139 с параметром объекта в качестве первого параметра.

Затем переменная индекса возвращает правильный номер карты.