Lista táctil Sencha

Soy nueva en sencha touch. Me encuentro con un comportamiento extraño. En breve quiero hacer una ventana con la barra de herramientas y la lista a continuación.

Código de lanzamiento principal:

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: 'xxx',

    controllers: ['Main'],
    views: ['Home', 'Header', 'Footer', 'list.MainMenu'],
    stores: ['MainMenu'],
    models: ['MenuItem'],


    launch: function() {
        Ext.create('xxx.view.Viewport');
    }
});

vista de ventana:

Ext.define('xxx.view.Viewport', {
    extend: 'Ext.Panel',

    config: {
        fullscreen: true,

        items: [
            {
                xtype: 'headerpanel',
            },{
                xtype: 'MainMenu'
            }
        ]
    }
});

vista de encabezado:

Ext.define('xxx.view.Header', {
    extend: Ext.Panel,
    xtype: 'headerpanel',

    config: {               
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [
                    {
                        text: 'One',
                        align: 'left'
                    },{
                        text: 'Two',
                        align: 'right'
                    }
                ]
            }
        ]
    }
});

Vista de menú:

Ext.define('xxx.view.list.MainMenu', {
    extend: 'Ext.List',
    xtype: 'MainMenu',

    requires: ['xxx.store.MainMenu'],

    config: {
        itemTpl: '{title}',
        store: 'MainMenu'       
    }
});

Tienda de menú:

Ext.define('xxx.store.MainMenu', {
    extend: 'Ext.data.Store',

    config: {
        model: 'xxx.model.MenuItem',
        data: [
            {icon: 'a', title: 'A'},
            {icon: 'b', title: 'B'},
        ]
    }
});

Modelo de menú:

Ext.define('xxx.model.MenuItem', {
    extend: 'Ext.data.Model',   

    config: {
        fields: ['icon', 'title']
    }
});

El resultado de este código de pieza es solo barra de herramientas sin ninguna lista.

enter image description here

Configuré el diseño en 'adaptar' value el resultado es opuesto: la única lista que puedo ver.

enter image description here

preguntado el 21 de noviembre de 12 a las 15:11

1 Respuestas

Olvidó establecer un diseño para su vista Viewport. Sin un diseño, el contenedor no sabe cómo mostrar los elementos internos.

Intente lo siguiente:

Ext.define('xxx.view.Viewport', {
    extend: 'Ext.Panel',

    config: {
        fullscreen: true,
        layout:'fit',
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
                title: '<img src="lib/resources/images/x.png" />',  

                items: [{
                    text: 'One',
                    align: 'left'
                },{
                    text: 'Two',
                    align: 'right'
                }]
            },{
                xtype: 'list',
                itemTpl: '{title}',
                store: 'MainMenu' 
            }
        ]
    }
});

Puede encontrar más información sobre el diseño aquí

respondido 22 nov., 12:10

¿Alguna razón en particular por la que está usando tres vistas (archivos) diferentes en lugar de solo una? Actualicé mi respuesta - Titouan de Bailleul

Solo quería mantener separada cualquier vista del panel de encabezado (vista) que siempre está acoplado en la parte superior de la ventana gráfica. Ahora sus soluciones están funcionando como esperaba. ¿Algún buen patrón de navegación que puedas ofrecer para leer? - robertas setkus

Para la navegación, use el componente Sencha llamado Ext.navigation.View. docs.sencha.com/touch/2-1/#!/api/Ext.navigation.View - Titouan de Bailleul

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.