ComponentDataView - Ext components inside a dataview or listview

Hi,
This is cool. But I'm trying to make my component a resizable that wraps a <div thumb-wrap> in my template. Sorta like the image dataview demo. But the resizable needs an element when instantiated.

Any way to make this work with Resizable?

thanks!!!

ComponentDataView only correctly handles components, so you would need to create a simple BoxComponent descendant that adds resizable support and use that in the dataview.

Thanks Condor. I was reading the BoxComponent API.

For use in ComponentDataView, would I use something like "div:nth(0)" (since my template uses div's not tables) in the applyTo: or autoEl: section of BoxComponent? It didn't say if that kind of dom selector was supported.

Here's what I'm tinkering with now. The resizer and box component show, but _under_ the template element, not around it. My aim is to get the BoxComponent to surround each template item.

Code:

---

        dataview = new Ext.ux.ComponentDataView({
            store: store,
            tpl: tpl,
            autoHeight:true,
            singleSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',
            renderTarget: 'div:nth(0)',


            prepareData: function(data){
                return data;
            },
            items: [
                new Ext.BoxComponent({
                    height:150,
                    width:70,
                    listeners: {
                        render: function() {
                            var resizer = new Ext.Resizable(this.getEl(), {
                                handles: 's e',
                                minWidth: 50,
                                height:100,
                                minHeight: 100,
                                maxWidth: 800,
                                maxHeight: 600,
                                pinned:true
                            });

                        }
                    }
                })
            ],

---

No, ComponentDataView will do the applyTo for you. You only need to specify a config object for your resizable component.

ps. I would use 'div:first' or simply 'div' (if there is only one div).

Something like:

Code:

---

Ext.ux.ResizableComponent = Ext.extend(Ext.BoxComponent, {
    afterRender: function() {
        this.resizer = new Ext.Resizable(this.el, this.resizeConfig);
        Ext.ux.ResizableComponent.superclass.afterRender.call(this);
    },
    beforeDestroy : function(){
        Ext.destroy(this.resizer);
        Ext.ux.ResizableComponent.superclass.beforeDestroy.call(this);
    }
});
Ext.reg('ux.resizable', Ext.ux.ResizableComponent);

var dataview = new Ext.ux.ComponentDataView({
    store: ['img1.gif', 'img2.gif', 'img3.gif'],
    itemSelector: 'img',
    tpl: '<img src="{field1}">',
    items: [{
        xtype: 'ux.resizable',
        resizeConfig: {...},
        applyTarget: '/'
    }]
});

---

(warning: completely untested code!)

genius in motion Condor.....it works.

Funny that you made an xtype for resizable because I started this by looking for one and didn't find it. Now I know how to do it!

Wonderful work, thanks for that.
I insert buttons in a dataview, but I had a problem. Only one button was rendered in:

'<div class="DokumentListeInhalt">',
'<tpl for=".">',
'<tpl for="nodes">',
'<div class="DokumentInhaltNode">',
'<h1>{title}</h1>',
'<h2>{subtitle}</h2>',
'<p>{node_content}</p>',
'<div class="b"></div>',
'</div>',
'</tpl>',

'</tpl>',
'</div>'


items: {

xtype: 'compdataview',
store: xml_DokumentenInhalt_Store,
tpl: tpl_Dokument_Inhalt,
autoHeight : true,
itemSelector: 'div.DokumentInhaltNode',
cls: 'DataViewDokumentInhalt_Body',
singleSelect:true,

items: [{
text : 'Vergleiche mit',
xtype: 'button',
renderTarget: 'div.b'
}]
},


So I made an update on:

renderItems : function(startIndex, endIndex){
var ns = this.all.elements;

var endIndex = ns.length - 1;

because of the call: this.renderItems(0, this.store.getCount() - 1); gets only 1 element in my XML-Store.

But you have a nested dataset (nodes inside records). That will never work correctly with a DataView!

Can you post your reader config and an example of your data?

PHP Code:

---

var xml_DokumentenInhalt_Store = new Ext.data.XmlStore({
    autoLoad: false,
    storeId : 'xml_DokumentenInhalt_Store',
    url: 'data/example-full.xml',
    record : '/',
    fields : ['document_name',{
        name: 'nodes',
        convert: function(raw, item){
            var nodes = Ext.DomQuery.select('node', item);

            data = [];
            Ext.each(nodes, function(node){
                data.push({
                    id: node.getAttribute('node_id'),
                    title: Ext.DomQuery.selectValue('title', node),
                    subtitle: Ext.DomQuery.selectValue('subtitle', node),
                    node_content: Ext.DomQuery.selectValue('node_content', node),
                    //text: node.textContent || node.text,
                });
            });
            
            return data;

        }
    }]
    
});


/**
 * DataView Template 
 */
var tpl_Dokument_Inhalt = new Ext.XTemplate(
    '<div class="DokumentListeInhalt">',
    '<tpl for=".">',
        '<tpl for="nodes">',
            '<div class="DokumentInhaltNode">',
                '<h1>{title}</h1>',
                '<h2>{subtitle}</h2>',
                '<p>{node_content}</p>',
                '<div class="btn" nodeid="{id}"></div>', //NodeID an Button anhängen 
            '</div>',
        '</tpl>',

    '</tpl>',
    '</div>'
);

tpl_Dokument_Inhalt.compile();

... Window

                    xtype: 'compdataview',
                    id : 'DataViewDokumentInhalt',
                    store: xml_DokumentenInhalt_Store,
                    tpl: tpl_Dokument_Inhalt,
                    autoHeight : true,
                    itemSelector: 'div.DokumentInhaltNode',
                    cls: 'DataViewDokumentInhalt_Body',
                    singleSelect:true,
    
                    items: [{
    text : 'Vergleiche mit',
    xtype: 'button',
    iconCls : 'btnVergleichen',
    renderTarget: 'div.btn',
    handler : onVergleicheMit

}] 


---

data:

PHP Code:

---

<?xml version="1.0" encoding="UTF-8"?>
<document document_id="34" >
  <version_id>7</version_id>
  <document_name>Dokument</document_name>
  <release_date>2010-06-14</release_date>
  <official_release>false</official_release>
  <display_counter>
    <level type="capital_letter"> <!-- A,B,C..for top level title counting -->
      <level type="numeric" use_upper="false"> <!-- 1, 2, 3,.. for second level title counting; use_upper="false" means that the count from the upper level will not be used again -->
    <level type="numeric" use_upper="true"/><!-- use_upper="true" means that the counter from the upper level will be used again => 1.1, 1.2,... -->
      </level>
    </level>
  </display_counter>

  <!--this is the root node; titles etc. will not be used at moment-->
  <node node_id="0" type="structure">
    <level>0</level>
    <counter activate="false" manualChildCounter="false"/>
    <title></title>
    <subtitle></subtitle>
    <origin_id>0</origin_id>
    <ancestor_id>0</ancestor_id>
    <subnodes><!-- Level 1: A-->
      <node node_id="2" type="structure">
    <level>1</level> 
    <counter activate="true" manualChildCounter="true">A</counter> 
    <!-- all children have manual counter e.g. §18a -->
    <title>Paragraphenteil</title>
    <subtitle></subtitle>
    <origin_id>1</origin_id>
    <ancestor_id>1</ancestor_id>
    <comments>
      <comment comment_id="12">
        <comment_content>Das ist ein Kommentar ohne Anhang</comment_content>
        <creation_date>2010-05-02</creation_date>
        <user_name>uwe</user_name>
      </comment>
      <comment comment_id="13">
        <comment_content>Das ist ein noch ein Kommentar ohne Anhang</comment_content>
        <creation_date>2010-06-22</creation_date>
        <user_name>test</user_name>
      </comment>
    </comments>
    <subnodes> <!-- Level 2: manual counter - see parent node-->
      <node node_id="10" type="text">
        <level>2</level> 
        <counter activate="true">§1</counter>
        <manualCounter activate="true">§1</manualCounter> 
        <title>Ziel</title>
        <subtitle></subtitle>
        <origin_id>10</origin_id>
        <ancestor_id></ancestor_id>
        <node_content><![CDATA[Ziel der Weiterbildung ist ...]]></node_content>
        <comments>
          <comment comment_id="14">
        <comment_content>Das ist ein Kommentar</comment_content>
        <creation_date>2010-06-23</creation_date>
        <user_name>test</user_name>
        <attachment attachment_id="16" >
          <file_name>weiterbildung.rtf</file_name>
        </attachment>
          </comment>
        </comments>
      </node>
    </subnodes>
      </node>

      <node node_id="3" type="structure"><!-- Level 1: B-->
    <level>1</level>
    <counter activate="true" manualChildCounter="false">B</counter> 
    <title>Gebiete-, Facharzt und Schwerpunktkompetenzen</title>
    <subtitle></subtitle>
    <origin_id>3</origin_id>
    <ancestor_id></ancestor_id>
    <subnodes>
      <node node_id="100" type="structure"> <!-- Level 2: automatic counter 1,2,3.. -->
        <lock username="herbert" />
        <level>2</level> 
        <counter activate="true">1</counter> 
        <title>Gebiet Anästhesiologie</title>
        <subtitle></subtitle>
        <origin_id>100</origin_id>
        <ancestor_id></ancestor_id>
        <subnodes><!-- Level 3: automatic counter e.g.: 1.1,2.1,3.4. -->
          <node node_id="300" type="text">
                <lock username="herbert" />
        <level>3</level>  
        <counter activate="false"/> 
        <title></title>
        <subtitle></subtitle>
        <creation_date>2010-06-22</creation_date>
        <user_name>test</user_name>
        <origin_id>80</origin_id>
        <ancestor_id>90</ancestor_id>
        <node_content><![CDATA[<h5>Definition:</h5>Das Gebiet Anästhesiologie umfasst ... ]]></node_content>
          </node>
          <node node_id="500" type="text">
                <lock username="herbert" />
        <level>3</level> 
        <counter activate="true">1.1</counter> 
        <title>Facharzt / Fachärztin für Anästhesiologie</title>
        <subtitle>(Anästhesist / Anästhesistin)</subtitle>
        <origin_id>399</origin_id>
        <ancestor_id>399</ancestor_id>
        <node_content><![CDATA[
          <h5>Weiterbildungsziel:</h5>
          <p>Ziel der Weiterbildung im Gebiet Anästhesiologie ist ...</p>
          <h5>Weiterbildungszeit:</h5>
          <p>60 Monate .... gemäß § 5 Abs. 1 Satz 1, davon
            <ul>
              <li>48 Monate im Gebiet Anästhesiologie, davon können bis zu</li>
              <li>.... </li>
            </ul>
          </p>]]>
        </node_content>
        <comments>
          <comment comment_id="76">
            <comment_content>Das ist ein Kommentar: Diese beinhaltet keine Formatierung</comment_content>
            <creation_date>2010-02-22</creation_date>
            <user_name>test</user_name>
            <attachment attachment_id="22" >
              <file_name>weiterbildung.rtf</file_name>
            </attachment>
            <attachment attachment_id="24" >
              <file_name>weiterbildung1.pdf</file_name>
            </attachment>
          </comment>
          <comment comment_id="88">
            <comment_content>Das ist ein weiterer Kommentar</comment_content>
            <creation_date>2010-06-22</creation_date>
            <user_name>test</user_name>
            <attachment attachment_id="27" >
              <file_name>mehr.doc</file_name>
            </attachment>
          </comment>
        </comments>
          </node>
        </subnodes>

        <comments>
          <comment comment_id="34">
        <comment_content>Das ist noch ein Kommentar</comment_content>
        <creation_date>2009-02-21</creation_date>
        <user_name>test</user_name>
          </comment>
        </comments>
      </node>
    </subnodes>
      </node>
      <node node_id="5" type="structure"><!-- Level 1: C -->
    <level>1</level> 
    <counter activate="true" manualChildCounter="false">C</counter> 
    <title>Zusatz- und Weiterbildungen</title>
    <subtitle></subtitle>
    <origin_id>4</origin_id>
    <ancestor_id>4</ancestor_id>
    <comments>
      <comment comment_id="129">
        <comment_content>von Zusatz-Weiterbildungen geändert auf Zusatz- und Weiterbildung</comment_content>
        <creation_date>2010-06-22</creation_date>
        <user_name>herbert</user_name>
        <attachment attachment_id="91">
          <file_name>weiterbildung.pdf</file_name>
        </attachment>
      </comment>
    </comments>
    <subnodes> <!-- Level 2: 1,2,3 -->
      <node node_id="101" type="text">
            <lock username="ulli" />
        <level>2</level> 
        <counter activate="true">1</counter> 
        <title>Gebiet Anästhesiologie</title>
        <subtitle></subtitle>
        <origin_id>101</origin_id>
        <ancestor_id></ancestor_id>
        <node_content><![CDATA[<h5>Definition:</h5>Das Gebiet Anästhesiologie .....]]></node_content>
        <comments>
          <comment comment_id="145">
        <comment_content>Das ist ein Kommentar</comment_content>
        <creation_date>2010-06-23</creation_date>
        <user_name>test</user_name>
        <attachment attachment_id="99">
          <file_name>weiterbildung.rtf</file_name>
        </attachment>
          </comment>
        </comments>
      </node>
    </subnodes>
      </node> <!--end node 5 -->
    </subnodes>
  </node>
</document>

---

Thats it.

To get a flat dataset you should configure your store with:

Code:

---

record : 'node',
fields: [
    {name: 'document_name', mapping: function (node) {
        return Ext.DomQuery.select('document_name', node.parentNode);
    }},
    {name: 'id', mapping: '@node_id'},
    'title',
    'subtitle',
    'node_content'
]

---

(and remove <tpl for="nodes"> from your template)