How to bind event from TreePanel to a Panel?

[betauli]

I made one TreePanel and a Panel inside a hbox-ed Panel. TreePanel in the left, and Panel in the right side. How do I bind selection in TreePanel to detail information showed in the right Panel?

[BostonMerlin]

Big picture, monitor the trees item tap event via a controller action. When that action fires, find the detail panel (by way of a controller reference mapped to panel) then update your view.

Again, high level so you'll want to fill in the blanks. Hope that helps!
John

[betauli]

I created this in Sencha Architect 2.

TreePanel and common Panel inside a Vewport:

Ext.define('MyApp.view.MyViewport', {    extend: 'Ext.container.Viewport',


    initComponent: function() {
        var me = this;


        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    height: 256,
                    layout: {
                        align: 'stretch',
                        type: 'hbox'
                    },
                    title: 'My Panel',
                    items: [
                        {
                            xtype: 'treepanel',
                            flex: 1,
                            id: 'mytree',
                            maxWidth: 200,
                            title: 'My Tree Panel',
                            store: 'PemdaTreeStore',
                            rootVisible: false,
                            viewConfig: {
                                listeners: {
                                    select: {
                                        fn: me.onTreeviewSelect,
                                        scope: me
                                    }
                                }
                            },
                            columns: [
                                {
                                    xtype: 'treecolumn',
                                    maxWidth: 200,
                                    minWidth: 200,
                                    defaultWidth: 200,
                                    dataIndex: 'labelname',
                                    flex: 0,
                                    text: 'Daftar Pemda'
                                }
                            ]
                        },
                        {
                            xtype: 'panel',
                            flex: 1,
                            itemId: 'detailPanel',
                            tpl: [
                                '<h1>Tes</h1>',
                                'id: {id}<br />',
                                'labelname: {labelname}<br />',
                                'kdsatker: {kdsatker}<br />',
                                'namaprov: {namaprov}<br />'
                            ],
                            title: 'My Panel'
                        }
                    ]
                }
            ]
        });


        me.callParent(arguments);
    },


    onTreeviewSelect: function(dataviewmodel, record, options) {
        // grab a reference to the detailPanel via itemId
        // the # in front of the id indicates that we would like to grab a reference by
        var detailPanel = this.child('#detailPanel');
        // update the detailPanel with data
        // this will trigger the tpl to become updates
        detailPanel.update(record.data);
    }


});

The event binding is not working. Where did I go wrong?

[BostonMerlin]

Can you be more specific about what's not working? event firing, finding your detail panel etc..

The only thing jumping out at me is your use of this.child to find the panel which I believe only looks at direct descendants (in your case is a panel with no itemId). I typically use this.down to get at a child component which looks at all components below "this" not just direct descendants. I might be off but that's where I would look first.

Hope that helps
John

[betauli]

I want to bind Tree Panel and a Panel. I tried to show {labelname} and other data carried by the json in the detail Panel when a leaf in Tree Panel is selected. My json doesn't have root wrapping in it, and it works fine (Tree Panel is loaded correctly). But when I clicked one of the leaf, the template in detail Panel remain blank.

Can you be more specific about what's not working? event firing, finding your detail panel etc..

The only thing jumping out at me is your use of this.child to find the panel which I believe only looks at direct descendants (in your case is a panel with no itemId). I typically use this.down to get at a child component which looks at all components below "this" not just direct descendants. I might be off but that's where I would look first.

Hope that helps
John

[BostonMerlin]

In your onTreeviewSelect event, place console.dir(record); make sure 1) your event is firing, 2) you have data then 3) put console.dir(detailPanel) after your this.child code to make sure you're finding the detail panel and finally 4) add console.dir(record) or whatever param name you're calling the inbound record inside of your detail panes update method to confirm the programs flow is getting that far.

Hope that helps
John