Results 1 to 5 of 5

Thread: Intercomponent communication

  1. #1

    Default Intercomponent communication

    Hi all, my first post here, hope to not make too much a fool of myself

    I've started playing with ext trying to create a small panel to be used as a remote filebrowser using this example (...yes the comment on the page is mine ). After modification to retrieve data dynamically from the server, i cannot recreate the inter component communication. The action of the root node is ok, I think there is some problem in how I use selModel.

    Many thanks for any clues and/or advices on best practices !

    To the code...

    Code:
    // Form Panel
    MyForm = Ext.extend(Ext.form.FormPanel, {
        title: "Sample Form",
        renderTo: 'addForm',
        doSomething: function(a){
            console.log('node function');
            this.getForm().findField('node').setValue(a);
        },
        doSomethingElse: function(){
            console.log('root function');
            this.getForm().findField('node').setValue('');
        },
        initComponent: function(){
            Ext.apply(this, {
                items: {
                    xtype: 'fieldset',
                    labelPad: 10,
                    defaultType: 'textfield',
                    labelAlign: 'right',
                    items: [{
                        xtype: 'field',
                        id: 'node',
                        name: 'node',
                        fieldLabel: 'Selected Node',
                        labelSeparator: '',
                        width: 250,
                    }]
                }
            
            });
            MyForm.superclass.initComponent.call(this);
            
            //  Add a listener for nodeSelected event
            this.on('nodeSelected', function(a, b){
                console.log('node listener');
                this.doSomething(a)
            });
            
            //  Add a listener for rootSelected event
            this.on('rootSelected', function(){
                console.log('root listener');
                this.doSomethingElse()
            });
        }
    });
    
    //  Tree Panel
    MyTree = Ext.extend(Ext.tree.TreePanel, {
        renderTo: 'treecontainer',
        viewConfig: {
            forceFit: true
        },
        initComponent: function(){
            MyTree.superclass.initComponent.call(this);
            //Root
            var root = new Ext.tree.AsyncTreeNode({
                text: 'Root',
                id: 'root',
                path: '.',
                expanded: true
            });
            root.on('click', function(){
                this.fireEvent('rootSelected');
            });
            this.setRootNode(root);
            Ext.apply(this, {
                selModel: new Ext.tree.DefaultSelectionModel({
                    listeners: {
                        selectionchange: function(selModel, node){
                            console.log("Panel click");
                            this.fireEvent('nodeSelected')
                        }
                    }
                }),
                //Loader
                loader: new Ext.tree.TreeLoader({
                    dataUrl: 'my/url/to/data',
                    listeners: {
                        beforeload: function(treeloader, node){
                            treeloader.baseParams.path = node.attributes.path;
                        }
                    }
                }),
            
            
            });
        }
        
        
    });
    and the onReady function

    Code:
    Ext.onReady(function(){
    //  Make panels
    var tree = new MyTree();
    var form = new MyForm({standardSubmit: true});
    
    form.relayEvents(tree, ['nodeSelected', 'rootSelected']);
    //console.log(tree);
    });

  2. #2

    Question

    At first I was thinking that's because the two components aren't inside a panel container, but the rootSelected event works as intended, it's the node Selected event that get's fired but not intercepted by the listener...I'm breaking my head...some advice nobody ? Even small would be very welcomed !!

  3. #3

    Default

    it's sad continuing only speaking to myself ...i'm not so charming...

    after some trials I've changed this part
    Code:
                
    selModel: new Ext.tree.DefaultSelectionModel({
                    listeners: {
                        selectionchange: function(selModel, node){
                            console.log("Panel click");
                            this.fireEvent('nodeSelected')
                        }
                    }
                }),
    with this very simple one
    Code:
            this.on('click',function(node){
                this.fireEvent('nodeSelected');
            })
    and it *seems* to work....but I would really really really appreciate if some guru could explain me the reason !!

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    It's a scope problem:
    Code:
    root.on('click', function(){
      this.fireEvent('rootSelected');
    }, this);
    (otherwise 'this' will be the node and not the tree)

  5. #5

    Default

    thank you for pointing that out! But the root event was functioning correctly, actually the problem was in the 'nodeselected' event.

    I was not understanding why after my change from the "selmodel" syntax to the "on" syntax all went right.

Posting Permissions

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