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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar