在 Sencha Touch MVC 应用程序中更新子面板

Posted 2023-02-26

【中文标题】在 Sencha Touch MVC 应用程序中更新子面板

【英文标题】：Updating Child Panels in Sencha Touch MVC App

【发布时间】：2011-08-30 01:39:08

【问题描述】：

开发从 json 存储中提取数据的 Sencha Touch MVC 应用程序（设置为从 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\/"

【参考方案1】：

使用 Ext.Panel 的 tpl 配置选项，而不是不存在的 itemTpl。

正如之前有人提到的，在使用模型实例和更新方法时要小心，您将需要使用模型的数据属性。

【讨论】：

是的，就是这样。它也没有完全理解 .data ，但在所有答案之后，它现在更清楚了。谢谢！

【参考方案2】：

试试这个：

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

原因是post实际上并没有直接暴露底层数据，你需要使用属性数据。

还有什么特别的原因让您停靠 postSinglePanel？我会非常小心使用过多的停靠项，因为它们是已知的错误和布局问题的来源。

【讨论】：

您的解决方案给了我与上述答案相同的数据。数据较少，但看起来像这样：我的博客文章中的一些内容...“ date="2011-06-18 02:55:01" user="">.

另外，你会推荐什么来代替后单面板？我最终想向 postSingleView 添加一个轮播和标签面板，而不仅仅是那个单一的面板。

我可以看看你的模板和 json 对象吗？

感谢所有帮助。不确定您的模板到底是什么意思，但我假设是 RegModel。我添加了它以及我从 Wordpress 中提取的 Json 数据示例。让我知道这是否是您要找的。​​span>

【参考方案3】：

一个简单的方法是编写自己的方法来更新子面板（你也可以看到覆盖默认的更新方法）

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
        // [...]
    ,

);

【讨论】：

很好的开始，但现在它给了我“更少”的数据，但仍然是转储而不是 tpl 正在调用的我注册的 body。这就是它给我的：我的博客文章中的一些内容......“ date="2011-06-18 02:55:01" user="">