Sencha Touch 不显示 XML 数据

Posted 2023-02-26

【中文标题】Sencha Touch 不显示 XML 数据

【英文标题】：Sencha Touch does not display XML Data

【发布时间】：2012-02-02 11:10:37

【问题描述】：

我正在使用 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

【参考方案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>

你可以看到是无效的。尝试将它们分组在一个元素根下，例如“项目”，即：

<?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'
        
    ,
);

【讨论】：

没有比这更好的答案了。你应该得到 +50。

嘿，请看这个...***.com/questions/9563417/…。并尝试回答它...

【参考方案2】：

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

【讨论】：

不幸的是，我已经尝试过了。但是感谢您的注意！

您发布的链接中的代码与问题中的代码略有不同。我在 jsfiddle 上玩过它，我认为该代码的问题是 xml 无效，因此 responseXML 为空。此外，如果您链​​接到 sencha touch 的调试版本而不是缩小版本，则调试会更容易。 dev.sencha.com/deploy/touch/sencha-touch-debug.js