Sencha Touch 2 툴바가있는 목록 레이아웃

Question

툴바가 맨 위에 고정되어있는 목록이 있습니다. 이 목록에는 indexBar도 있습니다. 도구 모음이 목록을 아래로 밀고있는 것으로 보입니다. 따라서 indexBar 제대로 세로로 정렬 된 및 목록 아래로 스크롤하고 마지막 항목을 얻을 때 제대로 표시되지 않습니다. 누구든지이 도구 모음이 목록을 아래로 밀어 내지 않도록 제대로 배치하는 방법을 알고 있습니까? 당신은 내가 상점에서 내 데이터를 얻고 볼 수 있듯이

app.customerList = Ext.define('CustomerList', { 
    constructor: function() {   
     this.listComponent = Ext.create('Ext.List', { 
      itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
      store: customerListStore, 
      id: 'customer_list', 
      grouped: true, 
      indexBar: true, 
      listeners: { 
       itemtap: { 
        fn: function (list, index, item, evt) { 

        }, 
        element: 'element' 
       } 
      } 
     }); 

     this.listWrapper = Ext.create('Ext.Panel', { 
      fullscreen: true, 
      layout: 'fit', 
      items: [ 
       { 
        xtype: 'toolbar', 
        docked: 'top', 
        title: 'Customers', 
        items: [ 
         { 
          xtype: 'button', 
          text: 'Home', 
          ui: 'back', 
          listeners: { 
           tap: { 
            fn: function() { 

            }, 
            element: 'element' 
           } 
          }        
         } 
        ] 
       }, 
       this.listComponent 
      ] 
     }); 

    } 
}); 

: 여기에 내 코드입니다. 나는 iPhone에이 문제를 해결할 수있었습니다. 아래의 CSS 규칙을 따르십시오. 38px이지만이 방법은 그렇게하지 않으려 고합니다. 저는 Sencha Video를리스트에서 보았습니다. 그리고 그들은이 딜레마에 대해 이야기했습니다. 그들의 해결책은 툴바가 래퍼에 도킹되어있는 래퍼에 목록을 넣는 것입니다. 그래서 저는 그렇게했으나 그래야만 레이아웃으로 옮길 수 없었습니다.

Answer 1

이것은 프레임 워크의 버그가 아니라 코드에 문제가있는 것 같습니다.

최종 결과를 스크롤 가능한 목록, 화면의 크기, 도구 모음이 맨 위에 고정되도록하려는 경우를 가정합니다. 여기

이 일어날 수 있도록 당신이 순서 변경 필요에 대한 몇 가지주의 사항입니다 : Ext.define을 사용하여 새 클래스를 정의 할 때, 당신이 (참고로 app.customerList을 설정할 필요가 없습니다

1. 당신의 첫 번째 문자열을 사용하여 참조가 자동으로 만들어지기 때문에 처럼, 당신이 그것을 정의한 후에는 원하는 위치

   Ext.define('app.customerList', { ... }); 
   

   , 당신은 그 클래스를 재사용 할 수 있습니다 : 그래서 귀하의 경우, 당신은이 일을하고 있습니다 :

   app.customerList = Ext.define('CustomerList', { ... }); 
   

   을하지만, 당신은이 작업을 수행해야 이 :

   `var view = Ext.create('app.customerList'); 
   

   나는 또한 app.customerList를 사용하여 센차 당신이 명명 규칙에 관해서을하는 것이 좋습니다, 그래서 자신의,837에서 살펴 봐야 당신을 조언 것이 아닙니다 점에 유의하고 싶습니다

   당신이 일을 어떻게 지어야하는지에 관해 읽을 시간이있을 때.

2. 클래스를 정의 할 때 다른 클래스를 확장해야하는 시간이 99 %입니다. 귀하의 경우에는 Ext. Container을 확장해야하며 목록이 포함 된 바깥 쪽 구성 요소 (this.listWrapper으로 정의)와 도킹 된 툴바를 생성해야합니다.

3. Sencha Touch에서 클래스를 확장 할 때 constructor 메서드를 재정의하지 말고 initialize 메서드를 사용해야합니다. 이 방법에서는 도킹 된 도구 모음과 목록을 추가합니다. 여기가 어떻게 보일지입니다 :

   initialize: function() { 
       this.callParent(); 
   
       this.listComponent = Ext.create('Ext.List', { 
        itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
        store: customerListStore, 
        id: 'customer_list', 
        grouped: true, 
        indexBar: true, 
        listeners: { 
         itemtap: { 
          fn: function (list, index, item, evt) { 
   
          }, 
          element: 'element' 
         } 
        } 
       }); 
   
       this.add([ 
        { 
         xtype: 'toolbar', 
         docked: 'top', 
         title: 'Customers', 
         items: [ 
          { 
           xtype: 'button', 
           text: 'Home', 
           ui: 'back', 
           listeners: { 
            tap: { 
             fn: function() { 
   
             }, 
             element: 'element' 
            } 
           } 
          } 
         ] 
        }, 
        this.listComponent 
       ]); 
   } 
   

   이 조각에서 기억해야 할 몇 가지가 있습니다

   • 당신은 항상 부모가 될 수 있으므로, initialize에서 부모 클래스를 호출해야 우리가 필요로하는 논리를하고 있습니다. 단순히 this.callParent();으로 전화하여이 작업을 수행 할 수 있습니다.
   • 먼저 listComponent을 정의하고 나중에 app.customerList 컨테이너에 삽입합니다.
   • 다음으로 개체 배열을 사용하여 this.add을 호출합니다. 이 메소드는 항목을 초기화 할 때 새 컨테이너 클래스에 항목을 삽입합니다. 우리가 통과 한 첫 번째 객체는 코드와 동일한 툴바 구성입니다. 배열의 두 번째 객체 인 listComponent을 전달합니다.

4. 우리는 우리의 용기의 크기에 스트레칭 새로운 컨테이너 클래스 내부의 목록을 원하는, 그래서 우리가 할 수있는 우리의 클래스의 config 블록에 fit의 layout 구성을 추가하여.

   config: { 
       layout: 'fit' 
   } 
   

   이 구성 블록은 Ext.define을 사용하여 새 클래스를 정의 할 때만 사용됩니다. Ext.create을 사용하거나 새 구성 요소를 객체로 전달하는 경우 (위에서 설명한 것처럼)이 특수 객체 안에 배치 할 필요가 없습니다.

5. 마지막으로 fullscreen 구성을 사용할 필요가 없습니다. 대신 새로운 클래스의 인스턴스를 만들고 Ext.Viewport에 직접 추가 할 수 있습니다.

   var customerList = Ext.create('CustomerList'); 
   Ext.Viewport.add(customerList); 
   
   // add this point you can reference the listComponent without the customerList like this: 
   console.log(customerList.listComponent.getStore()); 
   

그리고 사용자 정의 클래스에 대한 최종 코드는 다음과 같습니다 전체 리팩토링에 대한

Ext.define('CustomerList', { 
    extend: 'Ext.Container', 

    config: { 
     fullscreen: true, 
     layout: 'fit' 
    }, 

initialize: function() { 
    this.callParent(); 

    this.listComponent = Ext.create('Ext.List', { 
     itemTpl: '<div class="contact">{first_name} <strong>{last_name}</strong></div>', 
     store: customerListStore, 
     id: 'customer_list', 
     grouped: true, 
     indexBar: true, 
     listeners: { 
      itemtap: { 
       fn: function (list, index, item, evt) { 

       }, 
       element: 'element' 
      } 
     } 
    }); 

    this.add([ 
     { 
      xtype: 'toolbar', 
      docked: 'top', 
      title: 'Customers', 
      items: [ 
       { 
        xtype: 'button', 
        text: 'Home', 
        ui: 'back', 
        listeners: { 
         tap: { 
          fn: function() { 

          }, 
          element: 'element' 
         } 
        } 
       } 
      ] 
     }, 
     this.listComponent 
    ]); 
} 
}); 

var customerList = Ext.create('CustomerList'); 
Ext.Viewport.add(customerList); 

// add this point you can reference the listComponent without the customerList like this: 
console.log(customerList.listComponent.getStore()); 

미안하지만, 난 당신에게 같은 사용자 정의 클래스를 작성하는 올바른 방법을 보여 줄 알았는데 이.