ComponentDataView - Ext components inside a dataview or listview

[webxells]

I did:

var xml_DokumentenInhalt_Store_Flat = new Ext.data.XmlStore({
    autoLoad: true,
    storeId : 'xml_DokumentenInhalt_Store_Flat',
    url: 'data/example-full.xml',

    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'
    ],
    listeners: {
        load: function() {
            alert('test');
        }
    }
    
})

...


/**
 * DataView Template 
 */
var tpl_Dokument_Inhalt = new Ext.XTemplate(
    '<div class="DokumentListeInhalt">',
    '<tpl for=".">',

            '<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>',
    '</div>'
);

tpl_Dokument_Inhalt.compile(); 

But nothing is loaded. The old code was:

var xml_DokumentenInhalt_Store = new Ext.data.XmlStore({
    autoLoad: true,
    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;

        }
    }],
    listeners: {
        load: function () { alert('test'); }
    }
    
}); 

Any idea? The store data is empty, the second has data.

[webxells]

Sorry, but nothing is loaded with this code above. I could not find an error.

[Condor]

It really shouldn't be empty! How are you checking this?

ps. I made a small mistake on the document_name. It should be:

record : 'node',
fields: [
    {name: 'document_name', mapping: function (node) {
        while (node && node.tagName.toLowerCase() != 'document') {
            node = node.parentNode;
        }
        return Ext.DomQuery.selectValue('document_name', node.parentNode);
    }},
    {name: 'id', mapping: '@node_id'},
    'title',
    'subtitle',
    'node_content'
],

[marcolara]

This is an amazing addition to the user library. I have a question regarding the implementation of ComponentDataView and radiogroup. I have the following code and the selectors on the radio buttons are not working because it sets the same radio button name for each record/combogroup found in the data set:

{
                xtype: 'compdataview',
                store: store,
                tpl: this.testimonialRecordTmpl,
                autoHeight: true,
                multiSelect: false,
                overClass: 'x-view-over',
                itemSelector: 'div.story',
                emptyText: '<h1>No Testimonials</h1><p>There are currently no testimonials to review</p>',
                items: [{
                    xtype: 'radiogroup',
                    renderTarget: 'div.post_actions',
                    columns: 1,
                    items: [{
                        boxLabel: 'Post',
                        name: 'post',
                        inputValue: 1
                    }, {
                        boxLabel: 'Reject',
                        name: 'post',
                        inputValue: 0
                    }]
                }]
            } 

Is there a way to render components and dynamically assigning different component attributes (like id, name etc...) on each of them on the loop in order to avoid this kinds of problems?

[webxells]

Hello,

I have a problem with complistview. Firebug say's:

component is undefined
[IMG]chrome://firebug/content/blank.gif[/IMG] c = component.render ?

in 46

sourcecode from first page:

                var component = columns[j].component;
                c = component.render ?
                    c = component.cloneConfig() :
                    Ext.create(component, this.defaultType); 

How to use the extended ListView?

[Condor]

Did you look at the ComponentListView example? You need to define a component for each column.

[webxells]

Ups, sry

Let's try again .

Thanks.

[webxells]

Is there a way to let component blank?

[Condor]

Not in this version, you would need to modify renderItems for that to only render a component when one is defined.

[webxells]

OK,

I did this:

renderItems : function(startIndex, endIndex){
        var ns = this.all.elements;
        var args = [startIndex, 0];
        for(var i = startIndex; i <= endIndex; i++){
            var r = args[args.length] = [];
            for(var columns = this.columns, j = 0, len = columns.length, c; j < len; j++){
                var component = columns[j].component;
                
                //If no component is defined
                if (component == undefined) {
                  return;
                }
                
                c = component.render ?
                    c = component.cloneConfig() :
                    Ext.create(component, this.defaultType);
                r[j] = c;
                var node = ns[i].getElementsByTagName('dt')[j].firstChild;
                if(c.renderTarget){
                    
                    //If no renderTarget was found - prevent errors
                    if (Ext.DomQuery.selectNode(c.renderTarget, node)) {
                      c.render(Ext.DomQuery.selectNode(c.renderTarget, node));
                    }
                    
                }else if(c.applyTarget){
                    c.applyToMarkup(Ext.DomQuery.selectNode(c.applyTarget, node));
                }else{
                    c.render(node);
                }
                if(c.applyValue === true){
                    c.applyValue = columns[j].dataIndex;
                }
                if(Ext.isFunction(c.setValue) && c.applyValue){
                    c.setValue(this.store.getAt(i).get(c.applyValue));
                    c.on('blur', function(f){
                        this.store.getAt(this.index).data[this.dataIndex] = f.getValue();
                    }, {store: this.store, index: i, dataIndex: c.applyValue});
                }
            }
        }
        this.components.splice.apply(this.components, args);
    } 

So look at:

//If no component is defined
                if (component == undefined) {
                  return;
                } 

and:

if (Ext.DomQuery.selectNode(c.renderTarget, node)) {
                      c.render(Ext.DomQuery.selectNode(c.renderTarget,  node));
                    } 

So component will not be necessary.