Обновление дочерних панелей в приложении Sencha Touch MVC - PullRequest
Новая
       13

Обновление дочерних панелей в приложении Sencha Touch MVC

1 голос
/ 30 августа 2011

Разработка приложения Sencha Touch MVC, которое извлекает данные из хранилища json (настроено на БД, извлекающую контент из блога Wordpress).

Все работает до моей "детализации" панели.Вместо того, чтобы слушать TPL, он просто сбрасывает некоторые данные.Данные похожи на мои сообщения в блоге, но заполнены другим кодом и не имеют особого смысла.

Вот скудная версия моего списка: 

    myApp.views.PostListView = Ext.extend(Ext.Panel, {

    postStore: Ext.emptyFn,
    postList: Ext.emptyFn,
    id:'postlistview',
    layout: 'card',

    initComponent: function () {

       /* this.newButton = new Ext.Button({
            text: 'New',
            ui: 'action',
            handler: this.onNewNote,
            scope: this
        });*/

        this.topToolbar = new Ext.Toolbar({
            title: 'All Posts',
           /* items: [
                { xtype: 'spacer' },
                this.newButton
            ],*/
        });


        this.dockedItems = [ this.topToolbar ];

        this.postList = new Ext.List({
            store: myApp.stores.postStore,
            grouped: true,
            emptyText: '<div style="margin:5px;">No notes cached.</div>',
            onItemDisclosure: true,
            itemTpl: '<div class="list-item-title">{title}</div>' +
                            '<div class="list-item-narrative"><small>{body}</small></div>',

        });

        this.postList.on('disclose', function (record) {
            this.onViewPost(record);
        }, this),

        this.items = [this.postList];

        myApp.views.PostListView.superclass.initComponent.call(this);
    },
    onViewPost: function (record) {
        Ext.dispatch({
            controller: myApp.controllers.masterController,
            action: 'viewpost',
            post: record
        });
    },
});

А вот «подробное» представление, которое вызывается при раскрытии: 

myApp.views.PostSingleView = Ext.extend(Ext.Panel, { 

    title:'Single Post',
    id:'postsingleview',
    layout:'card',
    style:'background:grey;',

    initComponent: function () {

        this.new1Button = new Ext.Button({
            text: 'Back',
            ui: 'back',
            handler: this.onViewList,
            scope: this,
            dock:"left"
        });

        this.top1Toolbar = new Ext.Toolbar({
            items: [
                this.new1Button
            ],

            title: 'Single Posts',
        });

        this.postSinglePanel = new Ext.Panel({
            layout:'fit',
            flex:1,
            scroll: 'vertical',
            style:'padding:10px;background:yellow;',
            itemTpl: '<tpl for=".">' +
                        '<div class="list-item-narrative">{body}</div>' +
                     '</tpl>',
        });

        this.dockedItems = [ this.top1Toolbar, this.postSinglePanel ];

        myApp.views.PostSingleView.superclass.initComponent.call(this);
    },

    onViewList: function () {
        Ext.dispatch({
            controller: myApp.controllers.masterController,
            action: 'viewlist',

        });
    },
});

А вотконтроллер, с которым он общается: 

    Ext.regController('masterController', {


    'index': function (options) {

        if (!myApp.views.mainView) {
            myApp.views.mainView = new myApp.views.MainView();
        }

        myApp.views.mainView.setActiveItem(
            myApp.views.postView
        );
    },

    'viewpost': function (options) {

        myApp.views.postSingleView.postSinglePanel.update(options.post);
        myApp.views.postView.setActiveItem(
            myApp.views.postSingleView,
            { type: 'slide', direction: 'left' }
        );
    },

});

myApp.controllers.masterController = Ext.ControllerManager.get('masterController');

Когда данные выходят, они выглядят примерно так:

http://i.imgur.com/QlQG8.png

(черные ящики "отредактированы"содержание, там нет кода ошибки).

В заключение я считаю, что контроллер «сбрасывает» данные в «MyApp.views.PostSingleView», а не форматирует их, как я запрашиваю в TPL, хотя я не уверен, как это исправить.Любая и вся помощь очень признательна!

ОБНОВЛЕНИЕ: По запросу, вот RegModel: 

    Ext.regModel("CategoryModel", {
    fields: [
        {name: "id", type: "int"},
        {name: "title", type: "string"},
        {name: "body", type: "string"},
    ],
    hasMany: {
        model: 'Post',
        name: 'posts'
    }
});

А вот образец json: 

{
   "status":"ok",
   "post":{
      "id":1037,
      "type":"post",
      "slug":"post-title",
      "url":"http:\/\/localhost:8888\/jsontest\/PostTitle\/",
      "status":"publish",
      "title":"Post Title",
      "title_plain":"Post Title",
      "content":"<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br \/>\nLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<!-- PHP 5.x -->",
      "excerpt":"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat [...]",
      "date":"2011-07-29 14:17:31",
      "modified":"2011-08-30 01:33:20",
      "categories":[
         {
            "id":87,
            "slug":"the-category",
            "title":"The Category",
            "description":"",
            "parent":17,
            "post_count":5
         }
      ],
      "tags":[

      ],
      "author":{
         "id":2,
         "slug":"tom",
         "name":"tom",
         "first_name":"tom",
         "last_name":"",
         "nickname":"",
         "url":"",
         "description":""
      },
      "comments":[

      ],
      "attachments":[

      ],
      "comment_count":0,
      "comment_status":"open"
   },
   "previous_url":"http:\/\/localhost:8888\/jsontest\/next-post\/",
   "next_url":"http:\/\/localhost:8888\/jsontest\/prev-post\/"
}

Ответы [ 3 ]

1 голос
/ 01 сентября 2011

Используйте параметр конфигурации tpl Ext.Panel, а не itemTpl, которого не существует.

Как уже упоминалось ранее, будьте осторожны при использовании экземпляра модели и обновленияметод, вам нужно будет использовать свойство данных модели.

0 голосов
/ 30 августа 2011

Простой способ - написать собственный метод для обновления дочерних панелей (вы также можете переопределить метод обновления по умолчанию) 

myApp.views.PostSingleView = Ext.extend(Ext.Panel, { 
   initComponent: function () {
      // [...]
   },

   // [...]

   myUpdate: function(data) {
      this.postSinglePanel.update(data);
      this.doComponentLayout(); // not sure if necessary...
   }
});

и от вашего контроллера: 

Ext.regController('masterController', {
    // [...]
    'viewpost': function (options) {

        myApp.views.postSingleView.myUpdate(options.post.data); // note the .data
        // [...]
    },

});
0 голосов
/ 30 августа 2011

Попробуйте использовать это: 

myApp.views.postSingleView.postSinglePanel.update(options.post.data);

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

Также есть какая-то конкретная причина, по которой вы устанавливаете пост SinglePanel? Я бы очень осторожно использовал слишком много пристыкованных элементов, поскольку они являются известным источником ошибок и проблем с макетом.

...