Sencha touch 2-Liste in einem Schaltschrank

Haben ein ziemlich gemeinsame Aufgabe zu tun, wo brauche ich ein Suchformular oben eine Liste, um die Ergebnisse anzuzeigen, das problem ist, dass die Liste zeigt nicht die Ergebnisse, die store und der proxy richtig funktioniert, weil wenn ich mit firebug zu suchen, die Liste der Elemente der Liste immer die Höhe von 0px.

Habe ich bereits durchsucht und die üblichen Wege zur Abhilfe besteht in der Verwendung eines fit-layout, aber mit, dass auf der übergeordneten panel macht alle klein Aussehen, als ob die Breite verwendet wurde 10px.

Kann ich nicht eine Feste Höhe, weil ich will, die Liste zu füllen den verbleibenden Platz, und weder die flex-option verursachen, erstreckt sich das Suchformular, wenn ich will, dass die Verwendung der Standard-Größe der buttons und Eingabefelder.

Hier ist die config Im mit auf der Ansicht

Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
    items:[
        {
            fullscreen:true,
            scroll:false,
            xtype:'panel',
            title:'Search',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    label:'Search',
                },
                {
                    xtype:'container',
                    layout:'hbox',
                    width:'100%',
                    margin:'3 0 0 0',
                    defaults:{
                        flex:1
                    },
                    items:[
                        {
                            xtype:'selectfield',
                            options:[
                                {text:'Option 1', value:'opt1'},
                                {text:'Option 2', value:'opt2'}
                            ]
                        },
                        {
                            xtype:'button',
                            text:'Search',
                            action:'search'
                        }
                    ]   
                },
                {
                    xtype:'list',
                    itemTpl:['{title}'],
                    onItemDisclosure:true,
                    plugins:[
                        { xclass: 'Ext.plugin.ListPaging' }
                    ]
                }

            ]
        },
    ],      
}
});

Dieses Bild beschreibt, was ich versuche zu erreichen, nahm ich den screenshot von der Einstellung manuell eine Höhe, auf der Liste container, wie Sie sehen können, es funktioniert das problem ist, dass die Liste Höhe nicht füllen den Raum unterhalb des Formulars standardmäßig.

Sencha touch 2-Liste in einem Schaltschrank

  • itemTpl:['{title}'], ?.. warum sind Sie itemTpl eine array
  • es kann ein array nach den docs itemTpl : String/String[]/Ext.XTemplate, wenn Sie einen multiline-Vorlage macht es einfacher zu Bearbeiten.
  • Was genau sind Ihre versuche, zu erreichen durch diesen code? Ihr code für o/p scheint auch sehr seltsam
  • I ' V Hinzugefügt ein Bild, um die Frage besser beschreiben, was Teil des Codes, der Ihnen seltsam scheint, ich habe folgte die Beispiele auf sencha docs, wie Sie zu definieren, all dieses Zeug. Danke!
  • Ihre gesamte-Komponente-Struktur scheint merkwürdig zu sein. Alle spezifischen Grund für diese Art der Strukturierung?
  • Ich sehe keine Shops in Ihrer Liste haben Sie versucht, einen laden und dann nur die Filterung der name des Gegenstands durch den Inhalt der search-box store-Filter? das ist, was ich tun, um die filter-Listen und es funktioniert ziemlich gut.
  • yeah ich den laden später auf einem controller (der store verwendet wird, hängt von einigen Entscheidungen), das problem ist nicht das speichern, werden die Daten korrekt geladen, wie Sie im Bild sehen kann. Dank
  • Warum eine Liste in einem panel innerhalb eines dataview ?
  • es gibt keine dataview, die Hierarchie der Container in dieser Ansicht ist wie folgt: NavigationView -> Systemsteuerung -> Liste

InformationsquelleAutor Aldo Reyes | 2012-05-07
  1. 1

    Dies ist, was ich am Ende tun, um dieses Problem zu lösen, es ist mehr ein workaround, da hatte ich das layout ändern, um nur die Liste, und benutzen Sie die Werkzeugleisten für die Suche Optionen auf diese Weise die Symbolleiste Steuerelemente-verwenden Sie nur die minimale Höhe, die Sie brauchen, um selbst zu zeichnen, richtig.

    Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
    fullscreen:true,
    layout:'card'
    items:[
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'searchfield',
                    name:'search',
                    flex:6
                },
                {
                    xtype:'button',
                    action:'search',
                    iconCls:'search',
                    iconMask:true,
                    ui:'simple',
                    flex:1
                }
                    ]
        },
        {
            xtype:'toolbar',
            docked:'top',
            items:[
                {
                    xtype:'selectfield',
                    flex:1,
                    options:[
                        {text:'Option 1', value:'opt1'},
                        {text:'Option 2', value:'opt2'}
                    ]
                }
            ]
        },
        {
             xtype:'list',
             itemTpl:['{title}'],
             onItemDisclosure:true,
             plugins:[
                 { xclass: 'Ext.plugin.ListPaging' }
             ]

        },
        ],      
    }
});

    Wie Sie sehen können, habe ich zwei Symbolleisten angedockt an der Spitze, und die Liste füllen das gesamte layout. Hier ist ein screenshot wie es jetzt aussieht.

    Sencha touch 2-Liste in einem Schaltschrank

    Vielen Dank für Ihre Zeit.

    InformationsquelleAutor Aldo Reyes
  2. 0

    haben Sie habe versucht, Ihren container-layout "passen"?, im Grunde alle die noch verfügbare Höhe, hier ist ein großer Führer auf layouts für sencha touch: http://docs.sencha.com/touch/2-0/#!/guide/layouts direkt von den docs!

    InformationsquelleAutor Roberto
  3. 0

    Panel haben sollte vbox layout, Liste, sollte fit layout und Satz flex option.

    Gesehen, wenn z.B. Balg, wenn flex Wert nicht gesetzt ist, um einen Knopf, sollte in Standard-Größe.

    Aus der Dokumentation:

    Flexing bedeutet, wir teilen die zur Verfügung stehende Fläche bis auf die flex
    jedes Kind Komponente...

    Hier ist ein Beispiel:

    Ext.define('MyApp.Blick.Main', {
    extend: 'Ext.tab.Panel",

    config: {
  tabBarPosition: 'bottom',

  items: [
    {
      title: 'Welcome',
      iconCls: 'home',

      html: [
        "Some content"
      ].join("")
    },

    {
      title: "About",
      iconCls: 'star',
      layout: "vbox", //this card has vbox layout

      items: [{
        docked: 'top',
        xtype: 'titlebar',
        title: 'List'
      },

      {
        xtype: "list",
        layout: "fit", //take as much space as available
        flex: 1, //define flex
        data: [
          {name: 'Jamie Avins',  age: 100},
          {name: 'Rob Dougan',   age: 21},
          {name: 'Tommy Maintz', age: 24},
          {name: 'Jacky Nguyen', age: 24},
          {name: 'Ed Spencer',   age: 26}
        ],
        itemTpl: '{name} is {age} years old'
      },

      {
        xtype: 'button',
        text: "Button"
      }

      ]
    }
  ]
}

    });

    Und screenshot:

    Sencha touch 2-Liste in einem Schaltschrank

    Hinweis: ich Lerne, Sencha Touch, so bin ich nicht sicher, ob das geschriebene korrekt ist.

    InformationsquelleAutor bmihelac
Schreibe einen Kommentar