Hybrid View

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    8
    Vote Rating
    0
    betauli is on a distinguished road

      0  

    Default How to bind event from TreePanel to a Panel?

    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
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      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
    betauli is on a distinguished road

      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
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      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
    betauli is on a distinguished road

      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
    522
    Vote Rating
    41
    BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about BostonMerlin has a spectacular aura about

      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

Thread Participants: 1

Tags for this Thread