Why isn't the component view populating with store data?

[oddz]

I can not seem to figure out the reason why the component view is not populating with the store data in the below scenario. Hopefully, someone here can help me out because I am at a lost for words.

* No errors or warnings are present.

Thanks

app.js

/*
* Editorial model
*/
Ext.define('sms.models.editorial.Editorial',{
    extend: 'Ext.data.Model',
    
        idProperty: 'id',
        fields: [
            {name: 'id' , type: 'int'},
            {name: 'title' , type: 'string'}
        ]
    
});

/*
* Editorial headlines store
*/
Ext.define('sms.stores.editorial.EditorialHeadlines',{
    extend: 'Ext.data.Store',
    
        autoLoad: true,
        pageSize: 20,
        model: 'sms.models.editorial.Editorial',
        proxy: {
            type: 'ajax',
            url: 'data.xml',
            reader: {
                type: 'xml',
                record: 'editorial'
            }
        }
    
});

/*
* Editorial headlines view
*/
Ext.define('sms.views.editorial.Headlines',{
    extend: 'Ext.dataview.ComponentView',
    xtype: 'editorialheadlines',
    
    config: {
        defaultType: 'editoriallistitem',
        store: 'sms.stores.editorial.EditorialHeadlines'
    }
    
});

/*
* Editorial list item view
*/
Ext.define('sms.views.editorial.EditorialListItem',{
    extend: 'Ext.dataview.DataItem',
    xtype: 'editoriallistitem',
    config: {
        dataMap: {
            getTitle: {
                setHTML: 'title'
            }
        },
        title: {
            cls: 'title'
        }
    },
    applyTitle: function(config) {
        return Ext.factory(config,Ext.Component,this.getTitle());
    },
    updateTitle: function(newTitle) {
        if(newTitle) {
            this.insert(0,newTitle);
        }
    }
});

Ext.application({
    name: 'sms',
    launch: function() {
    
        Ext.create('sms.views.editorial.Headlines',{fullscreen: true});
        
    }
});

data.xml

<?xml version="1.0"?>
<editorials>
    <editorial>
        <id>1</id>
        <title>Editorial 1</title>
    </editorial>
    <editorial>
        <id>2</id>
        <title>Editorial 2</title>
    </editorial>
    <editorial>
        <id>3</id>
        <title>Editorial 3</title>
    </editorial>
</editorials>

[oddz]

hmmm… removed defining the component view and instead instantiating it directly seems to load the items. However, the title is undefined.

Ext.application({
    name: 'sms',
    launch: function() {
    
        // Ext.create('sms.views.editorial.Headlines',{fullscreen: true});
        
        /*
        * Editorial headlines view
        */
        var list = Ext.create('Ext.dataview.ComponentView',{
            fullscreen: true,
            xtype: 'editorialheadlines',
            defaultType: 'editoriallistitem',
            store: Ext.create('sms.stores.editorial.EditorialHeadlines')
        });
        
    }
});

[oddz]

Anyone have an idea what is going on here or what I am doing incorrectly?

[arislaw]

there are some problema, I think, with the Ext.define

when I instantiate the classes it works but if I try to define and then use it later, nothing happen...

[oddz]

Any help here? I mean… is it something that has been done incorrectly or a bug.

[oddz]

?

[Zyphrax]

Small thing I noticed, shouldn't setHTML be setHtml?

[hataru]

try this way


Ext.define('sms.stores.editorial.EditorialHeadlines',{ extend: 'Ext.data.Store', autoLoad: true, pageSize: 20, model: 'sms.models.editorial.Editorial', proxy: { type: 'ajax', url: 'data.xml', reader: { type: 'xml',// INSERT THIS root: 'editorials',// END INSERT THIS record: 'editorial' } } });