Подробный просмотр страницы вложенного списка Sencha Touch - PullRequest
Новая
       21

Подробный просмотр страницы вложенного списка Sencha Touch

0 голосов
/ 19 сентября 2011

У меня есть следующий вложенный список (только для элемента в настоящее время, чтобы упростить тестирование). Это работает нормально, но как я могу отобразить нормальный вид страницы с 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);

ТАК, что пользователь выбирает элемент «Выбранная страница», он открывает страницу подробного просмотра и информацию html, предпочтительно из внешнего источника, чтобы ограничить количество кода на одной странице.

EDIT

Я думаю, что могу попытаться быть немного яснее.

Ниже мой вложенный список. 

   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'}]
            }
        ]
};

Когда я / пользователь нажимает на lsit и попадает в подсписок, затем нажимает на элемент списка, называемый «Подсписок два», тогда в данный момент он открывается на пустой странице, поскольку списков больше нет, но вместо woudl, чтобы показать обычную страницу с подробностями , которая может прокручивать и все.

В данный момент мне не нужно беспокоиться о динамической загрузке в моем json, поскольку я хочу получить работающую модель, прежде чем перейти к этой стороне

Thsi - это не приложение для отслеживания телефонных звонков, а стандартное веб-приложение, которое можно просматривать онлайн с помощью мобильных телефонов.

* Edn of Edit **

Спасибо

1 Ответ

2 голосов
/ 19 сентября 2011

Чтобы использовать внешний источник, используйте магазин с 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
    );
...