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
    520
    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
    520
    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
    520
    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

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

      0  

    Default


    Nothing's change. The console show me nothing.
    Where did I go wrong?

    I modify my code to following:
    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',
                                displayField: 'labelname',
                                rootVisible: false,
                                useArrows: true,
                                viewConfig: {
                                    listeners: {
                                        select: {
                                            fn: me.onTreeviewSelect,
                                            scope: me
                                        }
                                    }
                                }
                            },
                            {
                                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) {
            console.dir(record);
        }
    
    
    });
    Quote Originally Posted by BostonMerlin View Post
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi