Threaded View

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    6
    Vote Rating
    0
    liconita is on a distinguished road

      0  

    Default Answered: List doesn't load XmlStore...

    Answered: 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>
    capture.jpgfalure.pngxml.png

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

Thread Participants: 1

Tags for this Thread