Navegando con un botón en sencha touch

Question

Estoy dando mis primeros pasos con Sencha touch. Los resultados son solo lo que busco, llegar allí, sin embargo, es una lucha para saber cómo se arma el sencha. Poco a poco voy descifrando, pero a veces la forma en que funciona el código es un poco WTF.

Estoy intentando crear una aplicación muy simple que haga lo siguiente.

1) Tiene tres pestañas, Búsqueda cercana (geo), Búsqueda rápida de palabras clave, Búsqueda de categoría.
2) Cada una de las pestañas de búsqueda devuelve una lista de resultados
3) Cada una de las filas se puede hacer clic para mostrar un poco más de información.

He descubierto las pestañas bien, creo.

así:

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

que funciona muy bien. No hay diferencia entre las pestañas que conozco pero estoy construyendo hasta eso ...

Bien, lo primero en lo que quiero trabajar es en la pestaña de búsqueda de palabras clave, ya que es la más simple de probar para esta aplicación.

Así que añado un formulario.

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

Así que mi config pestaña rápida ahora se ve así:

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

ahora tengo una forma se ve exactamente como quiero y enganchado en mi búsqueda JSON y volviendo anuncios a la consola. ¡Estupendo!

Ahora quiero crear una vista de lista que tenga una barra superior con un botón Atrás. Esto estoy bastante seguro de que no es la forma de configurar esto, pero realmente estoy luchando por encontrar ejemplos sobre cómo hacerlo ya que el ejemplo con la fuente tiene una configuración complicada, y los simples no hacen lo que yo busco. .

añado ahora un modelo de configuración en la parte superior de mi archivo index.js para definir mi modelo de anuncio

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

En mi detector form éxito que hacer lo siguiente:

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

Estos trabajos sin embargo, no se desliza como me gustaría, como ocurre al hacer clic en los iconos en la barra de pestañas inferior.

Ahora aquí es donde me caigo, no puedo entender cómo hago que el botón Atrás funcione para llevarme de vuelta a la búsqueda por palabra clave.

He encontrado setCard y setActiveItem, pero parece que no puedo acceder a los que están en el contexto "this" en la función de escucha de resultados.

¿Podría alguien dar un ejemplo simple de cómo hacer esto?

Answer 1

La forma más fácil de resolver esto es probablemente otorgando a su TabPanel una identificación y luego haciendo referencia a ella dentro de su controlador.Intente actualizar su TabPanel así:

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

Y el controlador de botón de retroceso de esta manera:

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

Esto moverá a la primera tarjeta en el TabPanel (la tarjeta de ubicación).

Alternativamente, si desea modificar el valor de 'esto' en la función de controlador, sólo puede pasar en un ámbito:

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

'esto' se refiere ahora a lo que pasó en el alcance config. Es muy común ver a las personas usar "alcance: esto" para que "esto" dentro de su controlador sea lo mismo que "esto" fuera del controlador.