सेन्चा टच: डेटाव्यू पर घटक जो सूची समूह हैडर

Question

जैसा दिखता है मैं Ext.dataview.DataView व्यू का उपयोग कर रहा हूं। मैं इस डेटाव्यू में एक घटक जोड़ना चाहता हूं जो ग्रूपर हेडर को Ext.dataview से दिखता है। डिज़ाइन को सुसंगत रखने के लिए देखें। मैं केवल सिर पर एक बार इस घटक को लागू करना चाहता हूं (इसलिए मूल रूप से केवल एक समूह है)। सूची में दृश्य को बदलना एक विकल्प नहीं है क्योंकि इसकी जटिलता अधिक नई समस्याएं खुलती है।

मैंने पहले से ही एक पैनल जोड़ने और एक्स-लिस्ट-हेडर क्लास लागू करने का प्रयास किया था, लेकिन यह काम नहीं किया। एक सूची बनाने के समूह शीर्षकों की तरह एक घटक बनाने के लिए सबसे आसान तरीका क्या होगा?

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 
      },*/ 

     ] 
    } 
}); 

अग्रिम धन्यवाद!

Answer 1

दृष्टिकोण ठीक है। लेकिन आप निम्नलिखित

<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> 

उपयोग की जरूरत है:

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