Threaded View

  1. 14 Nov 2012 2:52 PM #1
    liconita
    liconita is offline
    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
    Reply With Quote Reply With Quote
  2. Best Answer Posted by bricemason

    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

Tags for this Thread