sencha-touch - que - sencha touch examples

¿Cómo puedo hacer una dataview.list visible en Sencha Touch 2?

Question

Un novato de Sencha Touch aquí. Dicho eso, he estado entendiéndolo lentamente en el último día más o menos. Una cosa que me ha vuelto loco es que los paneles de formularios y las listas no aparecen por algún motivo de diseño extraño. No puedo entender por qué. Por ejemplo, tengo la siguiente vista de búsqueda:

Ext.define(''NC.view.Search'', {
  extend: ''Ext.dataview.List'',
  xtype: ''searchpage'',
  id: ''search-form'',

  config: {
    title: ''Search'',
    layout:  ''vbox'',
    itemTpl: ''<div class="name">{name}</div>'',
    store: ''Recipes'',

    items: [
      {
        xtype: ''toolbar'',
        docked: ''top'',

        items: [
          { xtype: ''spacer'' },
          {
            xtype: ''searchfield'',
            placeHolder: ''Search...''
          },
          { xtype: ''spacer'' }
        ]
      }
    ]
  }
})

Esto se encuentra en un panel de pestañas:

Ext.define(''NC.view.Recipes'', {
  extend: ''Ext.tab.Panel'',
  xtype: ''recipetabpanel'',

  config: {
    title: ''Recipes'',
    tabBarPosition: ''bottom'',
    activeItem: 0,

    items: [
      {
        title: ''Recipes'',
        iconCls: ''bookmarks'',
        items: [
          {
            xtype: ''searchpage''
          }
        ]
      },
      {
        title: ''Settings'',
        iconCls: ''settings'',
        html: ''Settings screen''
      }
    ]
  }
})

Lo que esto da como resultado es un adorable panel de pestañas renderizadas, con una barra de búsqueda acoplada en la parte superior, pero no elementos de lista visibles. Si agrego a mi panel de lista algunas dimensiones:

width: ''100%'',
height: ''200px'',

Aparecen los elementos de lista de mi almacén de datos. Pero no puedo poner la altura al 100% porque desaparecerá (el CSS me falla).

Entonces, ¿qué jerarquía de diseño o especificaciones necesito para hacer que la lista aparezca y ocupar el área entre la barra de búsqueda y las pestañas en la parte inferior? ¡Gracias!

Answer 1

El componente Ext List no necesita un diseño. Además, un componente de lista no es un Contenedor, es solo una Vista de los datos que no puede tener hijos propios. Por lo tanto, no puede agregar elementos allí.

Asi que,

1. Eliminar diseño
2. Eliminar elementos
3. Agregue la barra de herramientas en el panel donde está agregando esta lista.
4. Agregar diseño: ''ajustar'' al panel de arriba

Lista:

Ext.define(''NC.view.Search'', {
  extend: ''Ext.dataview.List'',
  xtype: ''searchpage'',
  id: ''search-form'',
  config: {
    title: ''Search'',
    layout:  ''vbox'',
    itemTpl: ''<div class="name">{name}</div>'',
    store: ''Recipes''
  }
});

TabPanel:

Ext.define(''NC.view.Recipes'', {
  extend: ''Ext.tab.Panel'',
  xtype: ''recipetabpanel'',

  config: {
    title: ''Recipes'',
    tabBarPosition: ''bottom'',
    activeItem: 0,    
    items: [{
        title: ''Recipes'',
        iconCls: ''bookmarks'',
        layout : ''fit'',
        items: [{
            xtype: ''toolbar'',
            docked: ''top'',
            items: [{ xtype: ''spacer'' }, {
                xtype: ''searchfield'',
                placeHolder: ''Search...''
      },
      { xtype: ''spacer'' }
    ]
  },
          {
            xtype: ''searchpage''
          }
        ]
      },
      {
        title: ''Settings'',
        iconCls: ''settings'',
        html: ''Settings screen''
      }
    ]
  }
})

Answer 2

Las listas y las vistas de datos usan el diseño predeterminado, por lo que no es necesario que especifique su propio diseño de vbox . Si elimina esa configuración de la lista, debería funcionar.

Editar:

Bien, eché un vistazo más de cerca a tu aplicación. Puede verlo aquí: http://www.senchafiddle.com/#zlT62 (presione ejecutar ).

El problema era que no incluía un layout: fit el elemento de recetas en el panel de pestañas (Recipes.js, línea 15).

Necesita un diseño de ajuste para conocer el tamaño del nuevo elemento que está agregando.

Pero el problema de raíz con el elemento que está agregando es exagerado. Echemos un vistazo a su código:

{
    title: ''Recipes'',
    iconCls: ''bookmarks'',
    layout: ''fit'',
    items: [
        {
            xtype: ''searchpage''
        }
    ]
}

Lo que está sucediendo aquí es que está creando un nuevo Ext.Container (con un title , iconCls , etc.) y luego dentro de ese contenedor agregando el componente de página de searchpage que usted crea. Ahora el contenedor externo aquí (con el title ) se extenderá automáticamente al tamaño de su contenedor (el panel de pestañas) porque el panel de pestañas tiene una layout: ''card'' por defecto. El problema aquí es que está agregando otro componente (su página de searchpage ) y porque el contenedor que agregó (el que tiene el title ) no tiene un diseño (solo su contenedor, el panel de pestañas, sí), entonces la lista (página de searchpage ) no sabe extenderse al tamaño del artículo.

Esto se denomina sobreasignación, porque puede insertar el componente de la página de searchpage como elemento secundario del tabulador y darle un title e iconCls . Lo que deberías estar haciendo es esto:

{
    title: ''Recipes'',
    iconCls: ''bookmarks'',
    xtype: ''searchpage''
}

Como puede ver, solo estoy moviendo el xtype al bloque de configuración, y podemos eliminar la configuración de elementos completos, porque el elemento que estamos agregando es la página de searchpage real.

Y aquí hay un enlace al código, pero corregido: http://www.senchafiddle.com/#qXaQm

Espero que esto tenga sentido. Los diseños pueden ser difíciles de recoger con Sencha Touch. También te aconsejo que leas la guía de diseño (si no lo has hecho) en la documentación de Sencha Touch 2, ya que puede ser muy útil.