Container zeigt nicht alle Kinderpanels mit gleichen Breiten

Ich bin neu in Sencha Touch 2.Container zeigt nicht alle Kinderpanels mit gleichen Breiten

Ich möchte ein einfaches Beispiel erstellen, das einen Container mit 3 Panels enthält. Aber es scheint, dass nur das erste Panel zeigt, zwei übrig sind versteckt. Was ist los mit dir? Hier ist mein Code:

Ext.create('Ext.Container',{ 
    fullscreen: true, 
    layout: 'card', 
    items: [ 
    { 
     xtype: 'panel', 
     html: 'first one', 
    }, 
    { 
     xtype: 'panel', 
     html: 'second one', 
    }, 
    { 
     xtype: 'panel', 
     html: 'third one', 
    }, 
    ] 
});

Wenn es getan werden kann, wie könnte ich sie mit gleichen Breiten setzen?

Danke für jede Hilfe.

Quelle

2012-04-10 Nyan Cat

Sie haben 4 anhängende Kommentare, die entfernt werden sollen. Es ist eine schlechte Angewohnheit, sie in Javascript zu lassen. –

Dies ist genau das, was card Layout entwickelt, um in Sencha Touch 2 zu tun. Nur die erste Kindkomponente ist sichtbar, während die anderen ausgeblendet sind. Um Ihre Frage zu:

alle Bedienfelder anzuzeigen: ändern layout config hbox. Diese 3 Kinderpanels werden horizontal angeordnet. Wenn Sie sie vertikal setzen möchten, verwenden Sie außerdem vbox
Um ihre relative Breite festzulegen, verwenden Sie flex Config. Sie sollten flex:1 zu allen Ihren 3 Panels hinzufügen und es sollte funktionieren.

Ich hoffe, es hilft.

Quelle

2012-04-10 12:53:34

genau was ich brauche. Danke im Voraus! –

Hier ist ein Arbeitsbeispiel. Ich denke du willst 3 vertikale Boxen übereinander. Wenn Sie die vbox in hbox ändern, werden die Streifen von oben nach unten durchlaufen. Ich habe die Vollbildoption auskommentiert. Ich bin mir nicht sicher, wann es nötig ist.

app.js

 
Ext.application({ 
    name: 'Sencha', 

    launch: function() { 
     var view = Ext.create('Ext.Container', { 
//   fullscreen: true, 
      layout: { 
       type: 'vbox' 
      }, 
      items: [ 
       { 
        xtype: 'panel', 
        html: 'first one', 
        style: 'background-color: #fff', 
        flex: 1 
       }, 
       { 
        xtype: 'panel', 
        html: 'second one', 
        style: 'background-color: #f00', 
        flex: 1 
       }, 
       { 
        xtype: 'panel', 
        html: 'third one', 
        style: 'background-color: #0ff', 

        flex: 1 
       } 
      ] 
     }); 
     Ext.Viewport.add(view); 
    } 
});

index.html

 
<!doctype html> 
<html manifest="" lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Sencha</title> 
    <link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/resources/css/sencha-touch.css" type="text/css"> 
    <script type="text/javascript" 
    src="http://extjs.cachefly.net/touch/sencha-touch-2.0.0/sencha-touch-all-debug.js"></script> 
    <script type="text/javascript" src="app.js"></script> 
</head> 
<body> 
</body> 
</html>

Quelle

2012-04-10 21:23:59

Container zeigt nicht alle Kinderpanels mit gleichen Breiten

Antwort

Verwandte Themen