Question

我有一个扩展Ext.dataview.List的泛型类，它目前列出了我拥有的一组博客：

Ext.define('Blog.view.BlogList',{
extend: 'Ext.dataview.List',
xtype: 'blogList',

config: {
    cls: 'blogList',
    emptyText: 'No blogs found...',
    itemCls: 'blogListItem',
    itemTpl: [
        '<div class="blogThumb"><img src="{image.medium}" /></div>',
        '<div class="blogTitle">{title}</div>',
    ].join(''),
    loadingText: 'Loading blogs...'
    }
});

当有人点击列表中的某个项目时，我的控制器当前运行方法showBlog。这是我现在的控制器：

Ext.define('Blog.controller.Main',{
extend: 'Ext.app.Controller',

config: {
    refs: {
                    blogContainer: 'blogContainer',
        blogList: 'blogList'
    },
    control: {
        blogList: {
            itemtap: 'showBlog'
        }
    }
},

slideLeftTransition: { type: 'slide', direction: 'left'},

init: function() {
    console.log('Blog.controller.Main init');
},

launch: function() {
    console.log('Blog.controller.Main launch');
},

showBlog: function(list, index, element, record) {
    console.log('showing blog #'+record.data.id);

    var blogContainer = this.getBlogContainer();
    blogContainer.setData(record.data);
    Ext.Viewport.animateActiveItem(blogContainer, this.slideLeftTransition);
}

});

到目前为止，一切都运行得很好，但是，我无法弄清楚如何用tapped记录中的新信息更新blogContainer中的所有组件？

我无法使用创建面板的简单概念，因为在浏览博客时，我希望出现一个相当复杂的新容器......包含子组件等。

如何告诉这个新容器blog显示详细信息，然后更新其信息？

Answer 1

你可以试试这个。注释掉的行是另一个如何访问数据并将其值设置为组件的示例。

showBlog: function(view, record, item, index, e) {

    console.log('showing blog #'+index.data.id);

   // console.log('showing blog #'+index.data.example);

    var blogContainer = this.getBlogContainer();

    blogContainer.setData(index.data.id);

   // Ext.getCmp('idoftextfield').setValue(index.data.example);

    Ext.Viewport.animateActiveItem(blogContainer, this.slideLeftTransition);

希望有所帮助

如何使用Sencha将数据从列表视图发送到详细信息视图？

1 个答案: