ComponentDataView - Ext components inside a dataview or listview

[Sesshomurai]

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

[Condor]

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.

[Sesshomurai]

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.

        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
                            });

                        }
                    }
                })
            ],

[Condor]

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

[Condor]

Something like:

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

[Sesshomurai]

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!

[webxells]

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.

[Condor]

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?

[webxells]

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:

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

[Condor]

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

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)