1. #21
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
    Sesshomurai is on a distinguished road

      0  

    Default


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

  2. #22
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #23
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
    Sesshomurai is on a distinguished road

      0  

    Default


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

  4. #24
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  5. #25
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  6. #26
    Sencha User
    Join Date
    Nov 2007
    Posts
    294
    Vote Rating
    0
    Sesshomurai is on a distinguished road

      0  

    Default


    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!

  7. #27
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      0  

    Default


    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.

  8. #28
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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?

  9. #29
    Sencha User
    Join Date
    Feb 2010
    Posts
    27
    Vote Rating
    1
    webxells is on a distinguished road

      0  

    Default


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

                
    data = [];
                
    Ext.each(nodes, function(node){
                    
    data.push({
                        
    idnode.getAttribute('node_id'),
                        
    titleExt.DomQuery.selectValue('title'node),
                        
    subtitleExt.DomQuery.selectValue('subtitle'node),
                        
    node_contentExt.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',
                        
    storexml_DokumentenInhalt_Store,
                        
    tpltpl_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.

  10. #30
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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)