Question

我正在使用Sencha Touch编写应用程序。所以我读了一个XML文件并将数据放在列表视图中。不幸的是，我的应用程序没有显示任何列表项。我的控制台日志中没有错误，我根据文档完成了所有操作。

app.js：

FRANF = new Ext.Application({
name: 'FRANF',
useLoadMask: true,
launch: function() {

    FRANF.homescreenList = new Ext.List({
        store: FRANF.ListStore,
        itemTpl: '<div>{id} {name}</div>'
    });

    FRANF.homescreenListToolbar = new Ext.Toolbar({
        id: 'homescreenToolbar',
        title: 'FRA NF'
    });

    FRANF.homescreenListContainer = new Ext.Panel({
        id : 'itemListContainer',
        layout : 'fit',
        html: 'This is the notes list container',
        dockedItems: [FRANF.homescreenListToolbar],
        items: [FRANF.homescreenList]      
    });

    FRANF.viewport = new Ext.Panel({
        fullscreen : true,
        layout : 'card',
        cardAnimation : 'slide',
        items: [FRANF.homescreenListContainer]
    });     
}
});

index.js：

Ext.regModel('Contact', {
    fields: ['id', 'name']
});

FRANF.ListStore = new Ext.data.TreeStore({
    model: 'Contact',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url : 'homescreen.xml',
        reader: {
            type: 'xml',
            root: 'items',
            record: 'item'
        }
    }
});

XML：

<?xml version="1.0" encoding="UTF-8" ?>
<items>
    <item>
        <id>main-contacts</id>
        <name>Kontakte FRA NF</name>
    </item>
    <item>
        <id>important-numbers</id>
        <name>Lufthansa-Nummern A-Z</name>
    </item>
    <item>
        <id>who-does-what</id>
        <name>Was finde ich wo?</name>
    </item>
</items>

错误控制台说正确加载了XML文件。

您可以在此处查看我的测试应用：My Sencha Touch App

Answer 1

您的链接不包含您提供的代码。在您使用此xml文件的链接中：

<?xml version="1.0" encoding="UTF-8"?>
<item>
    <mail>1</mail>
    <name>Ed Spencer</name>
</item>
<item>
    <mail>2</mail>
    <name>Abe Elias</name>
</item>

您可以看到的内容无效。尝试将它们分组在一个元素根下，例如'items'，即：

<?xml version="1.0" encoding="UTF-8"?>
<items>
    <item>
        <mail>1</mail>
        <name>Ed Spencer</name>
    </item>
    <item>
        <mail>2</mail>
        <name>Abe Elias</name>
    </item>
</items>

那么你真正的问题是这一行：

 franf.homescreenList = new Ext.List({
            id: 'homescreenitems',
            store: franf.homescreenItemsStore,
            grouped: true,                       // <- this Line
            itemTpl: '<div class="item">{mail} {name}</div>'
        });

您看到自己正在对列表项进行分组，但未提供有关如何对其进行分组的指标。评论它，你会得到运行的应用程序。

同样修改代理的读者：

 reader: {
            type: 'xml',
            record: 'item',
            root: 'items'
        }

要将它们分组，请检查此http://docs.sencha.com/touch/1-1/#!/api/Ext.List您可以举例说明如何对项目进行分组。

Btw Sencha Touch 2现在处于测试阶段，所以我建议使用它 - 学习而不是1.1。

以下是您的整个工作代码：

franf = new Ext.Application({
    name: 'franf',
    useLoadMask: true,
    launch: function() {

        franf.homescreenList = new Ext.List({
            id: 'homescreenitems',
            store: franf.homescreenItemsStore,
           // grouped: true,
            itemTpl: '<div class="item">{mail} {name}</div>'
        });

        // Header Toolbar erzeugen
        franf.homescreenListToolbar = new Ext.Toolbar({
            id: 'homescreenToolbar',
            title: 'FRA NF'
        });

        // Fullscreen Panel erzeugen
        franf.homescreenListContainer = new Ext.Panel({
            id : 'itemListContainer',
            fullscreen: true,
            layout : 'fit',
            dockedItems: [franf.homescreenListToolbar],
            items: [franf.homescreenList]      
        });
    }
});

Ext.regModel('Items', {
    fields: ['mail', 'name']
});

franf.homescreenItemsStore = new Ext.data.Store({
    model: 'Items',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url : 'homescreen.xml',
        reader: {
            type: 'xml',
            record: 'item',
            root: 'items'
        }
    },
});

Answer 2

我认为你的列表需要绑定到Ext.data.Store而不是TreeStore。但是，NestedList可以与TreeStore一起使用。

Sencha Touch不显示XML数据

2 个答案: