Sencha Touch: Thành phần trên DataView trông giống như Tiêu đề Nhóm Danh sách

Question

Tôi đang sử dụng chế độ xem Ext.dataview.DataView. Tôi muốn thêm một thành phần vào dataview này trông giống như các tiêu đề cá mú gollper từ một Ext.dataview.List để giữ cho thiết kế phù hợp. Tôi chỉ muốn áp dụng thành phần này một lần trên đầu (vì vậy về cơ bản chỉ có một nhóm). Thay đổi chế độ xem thành danh sách không phải là một tùy chọn vì tính phức tạp của nó sẽ mở ra nhiều vấn đề mới hơn.

Điều tôi đã cố gắng là thêm bảng điều khiển và áp dụng lớp tiêu đề x-list-header, nhưng điều này không hiệu quả. Cách dễ nhất để tạo thành phần trông giống như tiêu đề nhóm của danh sách là gì?

Ext.define('app.view.myDataView', { 
    extend: 'Ext.dataview.DataView', 

    xtype: 'mydataview', 

    requires: [ 
     'app.view.myItem', 
     'Ext.dataview.List' 
    ], 

    config: { 
     title: "myDataView", 
     cls: 'myDataView', 
     defaultType: 'myitem', 
     grouped: true, 
     store: 'myStore', 
     useComponents: true, 
     disableSelection: true, 
     deferEmptyText: false, 
     itemCls: 'myItem', 

     items: [ 
      { 
       xtype: 'toolbar', 
       layout: 'vbox', 
       docked: 'top', 
       cls: 'myToolbar', 
       items: [ 
        { 
         // some toolbar items 
        } 
       ] 
      }, 

      { 
       xtype: 'component', 
       cls: 'x-list-header', 
       html: 'this is a test' 
      } 
      /*{ 
       xtype:'panel', 
       scrollDock:'top', 
       docked:'top', 
       tpl: new Ext.XTemplate ('<div class="x-list-header-wrap x-list-header">this is a test</div>'), 
       height:60 
      },*/ 

     ] 
    } 
}); 

Cảm ơn bạn trước!

Answer 1

Cách tiếp cận là ok. Nhưng bạn cần như sau

<div class="x-container x-list ..." id="ext-container-13"> 
    <div class="x-inner" id="ext-element-95"> 
     <div class="x-innerhtml x-list-header" id="ext-element-125"> 
      your content goes here 
     </div> 
    </div> 
</div> 

Sử dụng:

{ 
    xtype: 'container', 
    cls: 'x-list', 
    styleHtmlContent: true, 
    styleHtmlCls: 'x-list-header', 
}