0

I have a generic class that extends Ext.dataview.List, and it is currently listing out a set of blogs that I have: 

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...'
    }
});

When someone taps on one of the items in the list, my controller currently runs the method, showBlog. Here is my current controller:

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);
}

});

So far, everything works really well, however, I can't figure out how to update all the components in my blogContainer with the new information from the tapped record?

I can't use the simple concept of creating a panel, because when a blog is tapped, I would like a fairly complex new container to appear...with sub components, etc.

How do I tell this new container which blog to show the details of, and then update its info?

johnnietheblack
  • 13,050
  • 28
  • 95
  • 133
  • What is your blog container? What class are you extending? – sha May 15 '12 at 00:49
  • Hey there, my blog container extends Ext.Container, and has a Toolbar, a Panel, and a Tab Panel as items. The Tab Panel's items each also display info about the blog (like pictures, maps, etc). – johnnietheblack May 15 '12 at 02:11
  • Haha, being that this is my first Sencha project, I'm oblivious to whether or not that sounds completely nuts. – johnnietheblack May 15 '12 at 02:12

1 Answers1

0

You could try this. Commented out lines are another example of how to access the data and set its value to a component.

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);

Hope that helps

fuzzyLikeSheep
  • 473
  • 3
  • 10