javascript - examples - Navegando con un botón en sencha touch

sencha extjs

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.

Intento 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 busca 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.

Al igual que:

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

Eso funciona genial 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 para probar esta aplicación.

Entonces agrego 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 configuración rápida de pestañas 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 un formulario que busca exactamente cómo quiero y me conecté a mi búsqueda json y regreso de 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 estoy buscando. .

Ahora agrego una configuración de modelo 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 forma de escuchar al éxito, hago 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));
                }
        }

Esto funciona, sin embargo, no se desliza como me gustaría, como lo hace al hacer clic en los iconos en la barra de pestañas inferior.

Ahora bien, 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.

Encontré 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 manera 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 tabulador de esta manera:

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

Y su controlador de botón de la espalda como este:

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

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

Alternativamente, si desea modificar el valor de ''this'' en la función del manejador, puede simplemente pasar un alcance:

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

''esto'' ahora se refiere a lo que haya pasado en la configuración del alcance. 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.