2011-08-30 60 views
1

開發Sencha Touch MVC應用程序,該應用程序從json存儲中提取數據(即設置爲DB從Wordpress博客中提取內容)。在Sencha Touch MVC應用程序中更新子面板

一切工作到我的「詳細」面板。它不是在傾聽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\/" 
} 

回答

1

使用tpl配置選項的Ext.Panel不是不存在的itemTpl。

正如有人之前提到的,在使用Model實例和更新方法時要小心,您需要使用模型的data屬性。

+0

是的,就是這樣,它也完全不理解.data ,但所有的答案都已經清楚了,謝謝! – Tom

0

嘗試使用這樣的:

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

的原因該帖子實際上並不直接公開底層數據,您需要使用該屬性數據。

還有什麼特別的原因,你爲什麼對接postSinglePanel?我會非常小心地使用太多的停靠項目,因爲它們是已知的錯誤和佈局問題的來源。

+0

您的解決方案給了我與上面的答案相同的數據。數據較少,但看起來像這樣:從我的博客文章中的一些內容...「date =」2011-06-18 02:55:01「user =」「>。 – Tom

+0

另外,你會推薦什麼,而不是單獨發佈面板?我最終希望將轉盤和tabpanel添加到postSingleView,而不僅僅是單個面板。 – Tom

+0

我可以看看你的模板和json對象嗎? – Luis

0

的簡單方法是寫自己的方法來更新子面板(你也可以看到覆蓋默認的更新方法)

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

偉大的開始,但現在它給了我「更少」的數據,但仍然是一個轉儲,而不是我登記的{body} tpl正在調用。這是它給了我什麼:從我的博客文章中的一些內容...「date =」2011-06-18 02:55:01「user =」「> – Tom