컨테이너는 동일한 폭

내가 내 3 개 패널 컨테이너가있는 기본 예제를 만들 센차 터치 2컨테이너는 동일한 폭

에 새로 온 사람과 모든 아동 패널을 표시하지 않습니다. 그러나 첫 번째 패널 만 보여주고 나머지 두 개는 숨겨져있는 것 같습니다. 뭐가 문제 야? 내 코드는 다음과 같습니다.

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

만약 가능하다면 어떻게 동일한 너비로 설정할 수 있습니까?

도움 주셔서 감사합니다.

출처

2012-04-10 Nyan Cat

당신은 제거해야 4 개 후행 의견이 app.js. Javascript에 남겨 두는 것은 나쁜 습관입니다. –

이것은 정확히 card 레이아웃이 Sencha Touch 2에서 설계된 것입니다. 첫 번째 하위 구성 요소 만 표시되고 다른 구성 요소는 숨겨져 있습니다. 귀하의 질문에 :

는 모든 패널을 표시하려면 : hbox에 layout 설정을 변경합니다. 이 3 개의 자식 패널은 수평으로 정렬됩니다. 또한 세로로 설정하려면 vbox
을 사용하십시오. flex config를 사용하십시오. 모든 3 개의 패널에 flex:1을 추가하면 제대로 작동합니다.

희망이 있습니다.

출처

2012-04-10 12:53:34

정확히 무엇이 필요합니다. 미리 감사드립니다! –

다음은 작동하는 예제입니다. 나는 당신이 서로의 위에 3 개의 수직 박스를 원한다고 생각한다. vbox를 hbox로 변경하면 줄무늬가 위에서 아래로 실행됩니다. 나는 전체 화면 옵션을 주석 처리했다. 나는 언제 그것이 필요한지 정확하게 알지 못한다.

는

 
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>

출처

2012-04-10 21:23:59

컨테이너는 동일한 폭

답변

관련 문제