我有一个扩展 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);
}
});
到目前为止,一切都运行良好,但是,我不知道如何使用来自点击记录的新信息更新我的 blogContainer 中的所有组件?
我不能使用创建面板的简单概念,因为当点击博客时,我希望出现一个相当复杂的新容器......带有子组件等。
如何告诉这个新容器blog
显示哪个详细信息,然后更新其信息?