从 Sencha touch 中的列表创建另一个列表

Posted 2023-02-25

【中文标题】从 Sencha touch 中的列表创建另一个列表

【英文标题】：Create another list from a list in Sencha touch

【发布时间】：2012-04-17 15:18:03

【问题描述】：

我被困在看似简单的事情上，

我是整个 Sencha 触控环境的新手，我仍然需要了解很多事情。

这是我面临的问题，

我已经从 Sencha 主页构建了 gettingStarted 应用程序，这个应用程序很简单，它从 JSON 数据加载列表并单击列表中的项目，它显示所选项目的 html 内容

我想做的是创建另一个列表，以便

1- 列出启动时的负载 2-单击列表 1 中的项目时，它会加载另一个列表 2 3-在点击列表 2 时，它会加载 HTML 内容。

我已经编写了 web 服务以将数据返回为 JSON，我想基于该数据构建第二个列表。

我在 itemTap 上调用了一个函数“showPost”，它看起来像这样：

 showPost: function(list, index, element, record)
    Ext.Ajax.request(
        url: 'http://localhost/mobig/ws/search.php?cat='+record.get('category'),            
        success: function(response)
            var text = response.responseText;
            var responses = Ext.JSON.decode(response.responseText);

            alert(responses.posts[0].title);
        
    );

我也有，这个：

    this.getBlog().setData(
        xtype:'panel',
        title:record.get('category'),
        html:'<img src='+record.get('imageURL')+'/>',
        scrollable:true,
        styleHTMLContent:true
    );
   

从列表 1 加载 HTML 内容。

提前感谢您的帮助，对于糟糕的英语感到抱歉，

如果你能指出一些例子，这将是一个学习的好地方。

谢谢！ 莫。

【参考方案1】：

节省时间最方便的方法是使用Ext.NestedList，但我不推荐它，因为目前Sencha Touch 2中的嵌套列表性能仍然很糟糕（滚动，事件捕捉等），如果你更关心性能，你应该使用2个单独的Ext.List，例如。 list_one 与 store_one 和 list_two 与 store_two，当 list_one 触发 itemtap 事件时，捕获 record 参数并处理它（可能通过读取 TreeStore，或编写自己的 API，例如 http://yourdomain/api=get_list_two&record_from_list_one=record）

希望对你有帮助。

【讨论】：

嗨 Thiem，感谢您的输入，让我试一试，我正在浏览煎茶视频并了解到我应该为每个列表创建一个单独的视图并在函数上创建视图加载。我之前已经编写了我的 api 来返回 JSON 数据，但是我再次尝试创建 JSON 数据时遇到了困难，您是否知道任何显示动态构建 JSON 数据的示例？

这也取决于您的后端服务器返回什么，我的意思是 Web API。您是指来自 Web API 的 JSON 数据格式，它便于构建每个列表的数据记录，还是只是处理它们的方式？我不确定我是否理解你的意思，所以请更具体地解释一下

嗨蒂姆，还没有找到解决方案，但我们仍在使用嵌套列表，看看它是否可以做我们想要的，理想情况下，这就是我的目标： 1）我的应用程序（加载），2）我有一个显示一些选项的屏幕 3）点击屏幕 1 上的选项/类别之一，它会带我进入屏幕 2，其中包含更多选项列表 4）一旦我从那里选择另一个选项，它显示一个带有 HTML 的页面...我可以通过 2 个 Web 服务调用来检索不同的 json 数据集吗？如果是这样，请您给我举个例子，或者，我应该使用嵌套列表吗？谢谢，

如果您想使用Ext.NestedList，只需按照 ST2 文档中的示例进行操作，结果 JSON 文件可能是这样的：apis.coa.vn/?api=nested-group。或者，如果您想使用 2 个分隔的 Ext.List（提供更好的性能），您可以在模型定义中添加一个附加字段，例如 parent。第一个列表选项有parent = 0，第二个列表选项有parent 指向第一个选项的id。然后使用Ext.data.Store 的filter 函数。我就是这样解决这个问题的。

【参考方案2】：

听起来您想设置一个嵌套列表。 Here's the nested list tutorial，这应该会为您指明正确的方向。

【讨论】：

谢谢 Briguy，嵌套列表是我想要完成的理想方式，让我看看这是否有效，感谢您的输入 :)