List doesn't load XmlStore...

on my browser. BUT it does on architect! Chrome's Command Line's clear. XML file's under data/products.xml. Working on Sencha Architect Version 2.1.0, Sencha cmd 3.0.0.250 n' Sencha Touch 2.1. Suggestions? why does architect can load xml store but my browser can't?




MyList:

Code:

---

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.mylist',




    config: {
        title: 'Catalogo Productos',
        store: 'MyXmlStore',
        grouped: true,
        onItemDisclosure: true,
        itemTpl: [
            '<div> Product: {name} Price: {price}</div>'
        ]
    }




});

---

MyXmlStore:

Code:

---

Ext.define('MyApp.store.MyXmlStore', {
    extend: 'Ext.data.Store',
    alias: 'store.myxmlstore',




    requires: [
        'MyApp.model.product'
    ],




    config: {
        model: 'MyApp.model.product',
        storeId: 'MyXmlStore',
        proxy: {
            type: 'ajax',
            url: 'data/products.xml',
            reader: {
                type: 'xml',
                record: 'Product'
            }
        }
    }
});

---

product:

Code:

---

Ext.define('MyApp.model.product', {
    extend: 'Ext.data.Model',
    alias: 'model.product',




    config: {
        fields: [
            {
                name: 'name',
                mapping: 'Name'
            },
            {
                name: 'price',
                mapping: 'Price'
            },
            {
                name: 'imageData',
                mapping: 'ImageData > Url'
            }
        ]
    }
});

---

products.xml:

Code:

---

<?xml version="1.0" encoding="UTF-8"?>
<Products xmlns="http://example.org">
    <Product>
        <Name>Widget</Name>
        <Price>11.95</Price>
            <ImageData>
                <Url>widget.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
    <Product>
        <Name>Sprocket</Name>
        <Price>5.95</Price>
            <ImageData>
                <Url>sc.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
    <Product>
        <Name>Gadget</Name>
        <Price>19.95</Price>
            <ImageData>
                <Url>widget.png</Url>
                <Width>300</Width>
                <Height>400</Height>
            </ImageData>
    </Product>
</Products>

---

Attachment 40061Attachment 40062Attachment 40063

I got your code working by doing the following:

I first generated a new app by running the command

Code:

---

sencha generate app MyApp myapp

---

in app.js, I added the appropriate view and store references:

Code:

---

views: ['Main', 'MyList'],
stores: ['MyXmlStore'],

---

MyApp.view.Main:

Code:

---

Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'MyApp.view.MyList'
    ],
    config: {
        tabBarPosition: 'bottom',


        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                xtype: 'mylist'
            }
        ]
    }
});

---

MyApp.view.MyList:

Code:

---

Ext.define('MyApp.view.MyList', {
    extend: 'Ext.dataview.List',
    alias: 'widget.mylist',

    config: {
        title: 'Catalogo Productos',
        store: 'MyXmlStore',
        //grouped: true,
        onItemDisclosure: true,
        itemTpl: [
            '<div> Product: {name} Price: {price}</div>'
        ]
    }


});

---

MyApp.store.MyXmlStore:

Code:

---

Ext.define('MyApp.store.MyXmlStore', {
    extend: 'Ext.data.Store',
    alias: 'store.myxmlstore',


    requires: [
        'MyApp.model.product',
        'Ext.data.reader.Xml'
    ],


    config: {
        autoLoad: true,
        model: 'MyApp.model.product',
        storeId: 'MyXmlStore',
        proxy: {
            type: 'ajax',
            url: 'data/products.xml',
            reader: {
                type: 'xml',
                record: 'Product'
            }
        }
    }
});

---

Note that in my code I commented out the grouped config option in the MyList view as there is no grouping configured on MyXmlStore.

I also added the autoLoad config option to MyXmlStore to load the data.

I hope this helps.

Brice

Heya Brice

I just added 'autoLoad: true' as shown:

Code:

---

Ext.define('MyApp.store.MyXmlStore', {
    extend: 'Ext.data.Store',
    alias: 'store.myxmlstore',


    requires: [
        'MyApp.model.product'
    ],


    config: {
        autoLoad: true,
        model: 'MyApp.model.product',
        storeId: 'MyXmlStore',
        proxy: {
            type: 'ajax',
            url: 'data/products.xml',
            reader: {
                type: 'xml',
                record: 'Product'
            }
        },
        grouper: {
            groupFn: function(record) {
                return record.get('name')[0];
            },
            sortProperty: 'name'
        },
        sorters: {
            property: 'name'
        }
    }
});

---

And worked like a charm. Thanks a lot. How do i change

Heya Brice. I just added 'autoLoad: true' as shown:

Code:

---

Ext.define('MyApp.store.MyXmlStore', {    extend: 'Ext.data.Store',
    alias: 'store.myxmlstore',


    requires: [
        'MyApp.model.product'
    ],


    config: {
        autoLoad: true,
        model: 'MyApp.model.product',
        storeId: 'MyXmlStore',
        proxy: {
            type: 'ajax',
            url: 'data/products.xml',
            reader: {
                type: 'xml',
                record: 'Product'
            }
        },
        grouper: {
            groupFn: function(record) {
                return record.get('name')[0];
            },
            sortProperty: 'name'
        },
        sorters: {
            property: 'name'
        }
    }
});

---

And worked like a charm. Thanks a lot!!