Question

我有以下嵌套列表（仅限于目前的项目以使测试更容易）。它工作正常，但是如何显示其中包含html或加载html页面的普通页面视图。

  var data = {text: 'Top List',
        items: [{
                text: 'List item',
                items: [{text: 'Selected Page'}]
            }]
};

Ext.regModel('ListItem', {
    fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
    model: 'ListItem',
   root: data,
   proxy: {
       type: 'memory',
       reader: {
          type: 'tree',
          root: 'items'
       }
    }
});
var nestedList = new Ext.NestedList({
   fullscreen: true,
   displayField: 'text',
   title: 'Theatres',
   store: store
});
  App.views.Pastcard = Ext.extend(Ext.Panel, {
  title: "past",
   iconCls: "add",
   items: [nestedList]
});

Ext.reg('HomeAbout', App.views.Pastcard);

SO希望用户选择“选定页面”项目，打开详细视图页面和html信息，最好是从外部来源限制一页上的代码量。

修改

我想我可以尝试更清楚一点。

下面是我的嵌套列表。

   var data = {text: 'My List',
        items: [{
            text: 'First List Item',
            items: [{text: 'Sub list one'}, {text: 'Sub list Two'}]
            },
            {
            text: 'Second List Item',
            items: [{text: 'Sub list one'},{text: 'Sub list Two'}]
            }
        ]
};

当我/用户clsks在lsit上并进入子列表然后点击名为“Sub list Two”的列表项时，然后它打开一个空白页面，因为没有更多列表，而是我woudl liek显示正常页面，其中包含详细信息，可以滚动显示所有内容。

目前，我需要担心动态地加载我的json，因为在我转向它的那一侧之前我需要一个工作模型

Thsi不是手机应用程序，而是通过手机在线查看的标准网络应用程序。

*编辑的编辑**

由于

Answer 1

要使用外部源，请使用带有ajax代理的商店，然后检查此http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.Store。

要显示HTML，您只能使用html: '<h1>Selected Page</h1>', styleHtmlContent:true, 而不是text:'Selected Page'

最好的方法是从：

加载JSON对象

var myStore = new Ext.data.Store({
model: 'User',
proxy: {
    type: 'ajax',
    url : '/users.json',
    reader: {
        type: 'json',
        root: 'users'
    }
},
autoLoad: true
});

然后使用模板显示它来代替html或text属性：

tpl:[
        '<h4>Email</h4>',
        '<tpl for="emails">',
            '<div class="field"><span class="label">{type}: </span><a href="mailto:{value}">{value}</a></div>',
        '</tpl>'
    ]

查看本教程http://www.sencha.com/learn/a-sencha-touch-mvc-application-with-phonegap/和API文档http://dev.sencha.com/deploy/touch/docs/以获取更多信息。

<强>更新

对于最后的项目，即子列表，添加此leaf: true，然后在列表中添加处理程序fir onItemDisclosure。您可以获取单击作为传递给事件的第一个参数的记录。然后，您可以使用该对象在其他面板上显示它。你仍然可以使用上面的教程，只需用一些静态数据替换从手机中取出联系人的代码。

从该教程开始，这是您需要的部分

app.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
    //put instances of cards into app.views namespace
    Ext.apply(app.views, {
        contactsList: new app.views.ContactsList(),
        contactDetail: new app.views.ContactDetail(),
        contactForm: new app.views.ContactForm()
    });
    //put instances of cards into viewport
    Ext.apply(this, {
        items: [
            app.views.contactsList,
            app.views.contactDetail,
            app.views.contactForm
        ]
    });
    app.views.Viewport.superclass.initComponent.apply(this, arguments);
}});

这是包含列表和详细信息面板的主面板。您处理列表中的onItemDisclosure事件，获取单击的记录，使用该数据更新详细信息面板并使用

切换到该面板

app.views.viewport.setActiveItem(
        app.views.contactsList, options.animation
    );

Sencha Touch嵌套列表详细页面视图

1 个答案: