Nawigacja za pomocą przycisku w sencha touch

Question

Robię pierwsze kroki z dotykiem Sencha. Rezultaty są po prostu tym, na co czekam, ale dotarcie do nich jest zmaganiem o to, jak powstaje sencha. Powoli się nad tym zastanawiam, ale czasami sposób w jaki działa kod jest trochę WTF.

Próbuję zbudować bardzo prostą aplikację, która wykonuje następujące czynności.

1) Posiada trzy zakładki, Wyszukaj w pobliżu (geo), Szybkie wyszukiwanie słów kluczowych, Wyszukiwanie kategorii.
2) Każda z wyszukiwań zakładek zwraca listę wyników.
3) Każdy z wierszy jest w stanie wyświetlić nieco więcej informacji.

Wymyśliłem zakładki w porządku, myślę.

tak:

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 
      ] 
     }); 
    } 
}); 

że działa świetnie. Nie ma różnicy między kartami, które znam, ale buduję do tego ...

Otóż, pierwszą rzeczą, nad którą chcę popracować, jest zakładka Wyszukiwanie według słów kluczowych, ponieważ jest to najprostszy test do tej aplikacji.

Dodam więc formularz.

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); 

Więc moje szybkie zakładka config wygląda teraz tak:

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

Mam teraz formularza patrząc dokładnie tak, jak chcę i podłączyć do mojego poszukiwania json i powrocie ogłoszenia do konsoli. Wspaniały!

Teraz chcę utworzyć widok listy, który ma górny pasek z przyciskiem Wstecz. Jestem pewien, że to nie jest sposób, aby to ustawić, ale naprawdę staram się znaleźć przykłady, jak to zrobić, ponieważ przykład ze źródłem ma skomplikowaną konfigurację, a te proste nie robią tego, co robię. .

I teraz dodać model config w górnej części mojego index.js pliku do określenia mojego modelu ogłoszenie

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'} 
    ] 
}); 

W moim forma sukces słuchacza I wykonaj następujące czynności:

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)); 
       } 
     } 

to działa jednak nie przesuwa się tak, jak bym chciał, podobnie jak po kliknięciu ikon na dolnym pasku kart.

Teraz to miejsce, w którym upadam, nie mogę zrozumieć, jak działa przycisk Wstecz, aby zabrać mnie z powrotem do wyszukiwania słów kluczowych.

Znalazłem setCard i setActiveItem, ale nie wydaje mi się, aby uzyskać dostęp do tych w kontekście "ten" w funkcji odbiornika wyników.

Czy ktoś mógłby podać prosty przykład, jak to zrobić?

Answer 1

Najprostszym sposobem rozwiązania tego problemu jest prawdopodobnie podanie identyfikatora TabPanel, a następnie odniesienie do niego wewnątrz programu obsługi.Spróbuj zaktualizować swoją tabpanel tak:

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

i Twoich pleców obsługi przycisku takiego:

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

ten przeniesie się do pierwszej karty w tabpanel (twoja karta lokalizacji).

Ewentualnie, jeśli chcesz zmienić wartość „this” w funkcji obsługi, można po prostu przejść w zakresie:

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

„to” teraz nawiązuje do tego, co pan przeszedł w sprawie zakresu config. Bardzo często zdarza się, że ludzie używają "scope: this", aby "to" w ich programie obsługi było takie samo jak "this" poza handler'em.