Results 1 to 7 of 7

Thread: How to bind event from TreePanel to a Panel?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default How to bind event from TreePanel to a Panel?

    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?

  2. #2
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    548
    Vote Rating
    44
      0  

    Default

    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

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    I created this in Sencha Architect 2.

    TreePanel and common Panel inside a Vewport:
    Code:
    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?

  4. #4
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    548
    Vote Rating
    44
      0  

    Default

    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

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    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.

    Quote Originally Posted by BostonMerlin View Post
    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

  6. #6
    Touch Premium Member BostonMerlin's Avatar
    Join Date
    Aug 2010
    Location
    Boston
    Posts
    548
    Vote Rating
    44
      0  

    Default

    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

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •