Sencha Touch - 如何在嵌套列表中显示最新内容?

发布于 2025-01-06 08:21:28 字数 1084 浏览 5 评论 0原文

假设在 Sencha Touch 中,我创建了一个嵌套列表,如下所示。

var NestedList = createList(jsonDataObject,'leftNavigation','list','bookmark-icon');
function createList( data , id , cls, iconCls)
{
    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: data,
        proxy: {
            type: 'ajax',
            reader: {
            type: 'tree',
            root: 'items'
            }
        }
    });

    var leftNav = new Ext.NestedList({
        //    cardSwitchAnimation: false,
        dock: 'left',
        id: id,
        cls: 'card '+cls,
        useTitleAsBackText: true,
        title: data.text ,
        iconCls: iconCls,
        displayField: 'text',
        width: '350',
        store: store});
}

过了一段时间,jsonDataObject 的内容将会更改(通过 setInterval() 调用定期进行更改,或者由于用户交互)。我可能还需要向 NestedList 存储提交一个全新的 jsonDataObject 。所以我的问题是:

a) 如何让 NestedList 刷新并显示包含新数据的新 UI?

b) 我的 createList() 实现是创建 Nestlisted 的最合适方法吗?或者有更好的方法来实现我的目的吗?

So let's say in Sencha Touch, I created a Nested List like so

var NestedList = createList(jsonDataObject,'leftNavigation','list','bookmark-icon');
function createList( data , id , cls, iconCls)
{
    var store = new Ext.data.TreeStore({
        model: 'ListItem',
        root: data,
        proxy: {
            type: 'ajax',
            reader: {
            type: 'tree',
            root: 'items'
            }
        }
    });

    var leftNav = new Ext.NestedList({
        //    cardSwitchAnimation: false,
        dock: 'left',
        id: id,
        cls: 'card '+cls,
        useTitleAsBackText: true,
        title: data.text ,
        iconCls: iconCls,
        displayField: 'text',
        width: '350',
        store: store});
}

After a while, the contents of jsonDataObject will change (either periodically via a setInterval() call or because of user interaction). I may also need to submit an entirely new jsonDataObject to the NestedList store. So my questions are:

a) How do I get the NestedList to refresh and display a new UI with the new data?

b) Is my implementation of createList() the most appropriate way to create a Nestlisted? Or is there a better way for my purposes?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

嘿嘿嘿 2025-01-13 08:21:28

由于没有人及时回答我的问题,我使用了一种解决方法。

我保留了问题中的代码。嵌套列表由容器面板使用。所以我所做的就是从容器面板中删除旧的嵌套列表,销毁它,然后创建一个新的嵌套列表,并将其插入回容器面板。举个例子:

// my old nestedlist was item 1 of the container, where container is Ext.TabPanel()
// you can re-use this strategy with any component in the container.items.items array
var oldnestedlist = container.items.items[1]; 
container.remove(oldnestedlist);
oldnestedlist.destroy();

// create the new nestedlist
var NestedList = createList(jsonDataObject,'leftNavigation','list','bookmark-icon');
container.insert(1,NestedList);
// After you insert the NestedList, the screen hasn't been redrawn yet,
// so i force the user to go back to screen if container.items.items[0] via
// setActiveItem(0).  You can choose the screen in any other
// container.items.items array
container.setActiveItem(0);

// Next time someone presses the tab for containers.items.items[1], the screen will automatically redraw

Because no one answered my question in time, I used a work around.

I kept the code as is in the question. The nested list is used by a container panel. So what I did was remove the old nestedlist from the container panel, destroy it, then create a new nestedlist, and insert it back to container panel. As an example:

// my old nestedlist was item 1 of the container, where container is Ext.TabPanel()
// you can re-use this strategy with any component in the container.items.items array
var oldnestedlist = container.items.items[1]; 
container.remove(oldnestedlist);
oldnestedlist.destroy();

// create the new nestedlist
var NestedList = createList(jsonDataObject,'leftNavigation','list','bookmark-icon');
container.insert(1,NestedList);
// After you insert the NestedList, the screen hasn't been redrawn yet,
// so i force the user to go back to screen if container.items.items[0] via
// setActiveItem(0).  You can choose the screen in any other
// container.items.items array
container.setActiveItem(0);

// Next time someone presses the tab for containers.items.items[1], the screen will automatically redraw
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文