Навигация с помощью кнопки в сенчане

Question

Я делаю первые шаги с прикосновением Сенча. Результаты - это то, что я получаю после этого, но есть борьба за то, как сэнча собирается. Я медленно вычисляю это, но иногда то, как работает код, немного WTF.

Я пытаюсь создать очень простое приложение, которое делает следующее.

1) Имеет три вкладки, Поиск поблизости (гео), Быстрый поиск по ключевым словам, Поиск по категориям.
2) Каждый из результатов поиска вкладок возвращает список результатов
3) Каждая из строк - это щелчок, который может отображать немного больше информации.

Я понял, что вкладки в порядке, я думаю.

Как так:

Ext.setup({ 
    tabletStartupScreen: 'tablet_startup.png', 
    phoneStartupScreen: 'phone_startup.png', 
    icon: 'icon.png', 
    glossOnIcon: false, 
    onReady: function() { 

       var location = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Location Search', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      })] 
     }); 

     var quick = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Quick Search', 
      scroll: 'vertical', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      })] 
     }); 

     var category = new Ext.Component({ 
      iconCls: 'search', 
      title: 'Category Search', 
      html: '<img src="images/gfb.gif" /><p>Category</p>' 
     }); 
     var tabpanel = new Ext.TabPanel({ 
      fullscreen: true, 
      tabBar: { 
       dock: 'bottom', 
       scroll: 'horizontal', 
       sortable: false, 
       layout: { 
        pack: 'center' 
       } 
      }, 
      cls: 'card1', 
      items: [ 
       location, 
       quick, 
       category 
      ] 
     }); 
    } 
}); 

Это прекрасно работает. Никакой разницы между вкладками, которые я знаю, но я строю до этого ...

Правильно, первое, на что я хочу работать, - это вкладка поиска по ключевым словам, так как это самый простой тест для этого приложения.

Поэтому я добавляю форму.

var quickFormBase = { 
       url: "../quicksearch.php?output=json", 
       items: [{ 
        xtype: 'fieldset', 
        instructions: 'The keyword search is great if you know the name of the company you are looking for, or the particular service you need to find.<p><br />To narrow it down to an area include the town or county name in your query</p>', 
        defaults: { 
         required: false, 
         labelAlign: 'left' 
        }, 
        items: [{ 
          xtype: 'textfield', 
          label: 'Search', 
          name : 'inpquery', 
          showClear: true, 
          autoCapitalize : false 
         }] 
      }], 
      listeners : { 
       submit : function(form, result){ 
      console.log('results', result.SearchResults.MainResults.Advert); 
       }, 
       exception : function(form, result){ 
        console.log('failure', Ext.toArray(arguments)); 
       } 
      } 
    }; 

var quickForm = new Ext.form.FormPanel(quickFormBase); 

Так что моя быстрый вкладка конфигурация теперь выглядит следующим образом:

var quick = new Ext.Container({ 
      iconCls: 'search', 
      title: 'Quick Search', 
      scroll: 'vertical', 
      items: [new Ext.Component({ 
       html: '<img src="images/gfb.gif" />' 
      }),quickForm] 
}); 

теперь у меня есть форма, глядя, как именно я хочу и зацепил в мой поиск JSon и возвращение объявления на консоль. Большой!

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

я теперь добавить модель конфигурации в верхней части моего index.js файла, чтобы определить мое объявление моделируют

Ext.regModel('Advert',{ 
    fields: [ 
      {name: 'advertid', type:'int'}, 
      {name: 'Clientname', type:'string'}, 
      {name: 'telephone', type:'string'}, 
      {name: 'mobile', type:'string'}, 
      {name: 'fax', type:'string'}, 
      {name: 'url', type:'string'}, 
      {name: 'email', type:'string'}, 
      {name: 'additionalinfo', type:'string'}, 
      {name: 'address1', type:'string'}, 
      {name: 'address2', type:'string'}, 
      {name: 'address3', type:'string'}, 
      {name: 'postcode', type:'string'}, 
      {name: 'city', type:'string'}, 
      {name: 'Countyname', type:'string'}, 
      {name: 'longitude', type:'string'}, 
      {name: 'latitude', type:'string'} 
    ] 
}); 

В моей форме успеха слушателя я следующее:

listeners : { 
       submit : function(form, result){ 

        var quickstore = new Ext.data.JsonStore({ 
         model : 'Advert', 
         data : result.SearchResults.MainResults.Advert 
        }); 

        var listConfig = { 
          tpl: '<tpl for="."><div class="advert">{Clientname}</div></tpl>', 
          scope: this, 
          itemSelector: 'div.advert', 
          singleSelect: true, 
          store: quickstore, 
          dockedItems: [ 
              { 
               xtype: 'toolbar', 
               dock: 'top', 
               items: [ 
                { 
                 text: 'Back', 
                 ui: 'back', 
                 handler: function(){ 
                  //Do some magic and make it go back, ta! 
                 } 
                } 
               ] 
              } 
             ] 
        }; 
        var list = new Ext.List(Ext.apply(listConfig, { 
         fullscreen: true 
        })); 
       }, 
       exception : function(form, result){ 
        console.log('failure', Ext.toArray(arguments)); 
       } 
     } 

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

Теперь я здесь, я падаю, я не могу понять, как я делаю заднюю кнопку, чтобы вернуть меня к поиску ключевых слов.

Я нашел setCard и setActiveItem, но я не могу получить доступ к тем, которые находятся в «этом» контексте в функции прослушивателя результатов.

Может ли кто-нибудь дать простой пример того, как это сделать?

Answer 1

Самый простой способ решить это, возможно, указав свой TabPanel на id, а затем ссылаясь на него внутри вашего обработчика.Попробуйте обновить свой tabpanel так:

var tabpanel = new Ext.TabPanel({ 
    id: 'mainPanel', 
    ... the rest of your config here 

И спина обработчик кнопки, как это:

handler: function() { 
    Ext.getCmp('mainPanel').layout.setActiveItem(0); 
} 

Это будет двигаться к первой карте в tabpanel (ваше местоположение карты).

В качестве альтернативы, если вы хотите изменить значение «это» в функции обработчика, вы можете просто передать в сферу:

text: 'Back', 
ui: 'back', 
scope: tabpanel, 
handler: function(){ 
    this.layout.setActiveItem(0); 
} 

«это» теперь ссылается на то, что вы прошли в о сфере конфигурации. Очень часто люди используют «scope: this», чтобы «это» внутри своего обработчика было таким же, как «this» вне обработчика.