Results 1 to 6 of 6

Thread: component communication

  1. #1

    Default component communication

    Hello,

    I'm trying to use Saki's example http://examples.extjs.eu/?ex=compcomm, but I don't really understand how the linksPanel works.
    I want to create a window with a border layout: north,south, west, center. In the west region I have an accordion with 3 panels. The plan is to use linksPanels for the accordion, this way when a link is clicked on the accordion content will be loaded in the center. However, I don't understand how to pass the onClick handler to all the links...

    Code:
    Ext.ns('Example');
    Example.LinksPanel = Ext.extend(Ext.Panel, {
    	 // configurables
    	border:false,
    	links:[{
    		text:'',
    		href:'#'
    	}],
    	layout:'fit',
    	tpl:new Ext.XTemplate('<tpl for="links"><p><a href="{href}">{text}</a></p></tpl>'),
    	initComponent:function() {
    		Ext.apply(this, arguments);
    		
    		Example.LinksPanel.superclass.initComponent.apply(this, arguments);
    	},
    	afterRender:function() {
    		// call parent
    		Example.LinksPanel.superclass.afterRender.apply(this, arguments);
    		// create links
    		this.tpl.overwrite(this.body, {links:this.links});
    	} // e/o function afterRender
    }); // e/o extend
    
    // register xtype
    Ext.reg('linkspanel', Example.LinksPanel);
    
    Example.WindowLayout = Ext.extend(Ext.Window, {
         initComponent:function() {
            Ext.apply(this, {
            	animCollapse: false,
    			closable: false,
                layout: 'border',
                items: [{
    		        region: 'south',
    		        html: '<br/>Footer',
    		        height: 40,
    		        minSize: 75,
    		        maxSize: 250//,
    		    },{
    		        region: 'north',
    		        height: 50,
    		        minSize: 75,
    		        maxSize: 250//,
    		    },{
    		        title: 'West Panel - Accordion Layout',
    		        region:'west',
    		        width: 200,
    		        minSize: 100,
    		        maxSize: 300,
    		        layout:'accordion',
    		        layoutConfig: {
    		        	// layout-specific configs go here
    		        	titleCollapse: false,
    		        	animate: true
    		    	},
    		    	items: [{ 
    					title: 'Welcome page',
    					items:[{
    						xtype: 'linkspanel',
    						links:[{text: 'Register', href: '#'}, {text: 'Local Log In'}]
    					}]
    						
    				},{
    					title: 'Overview',
    					items:[{
    						xtype: 'linkspanel',
    						links:[{text: 'Link 1', href: '#'}, {text: 'Link 2'}]
    					}]
    				},{
    					title: 'Configuration',
    					items:[{
    						xtype: 'linkspanel',
    						links:[{text: 'Link 3'}, {text: 'Link 4'}]
    					}]
    				}]
    			},{
    			    region:'center'
    			}]
            });
     
            Example.WindowLayout.superclass.initComponent.apply(this, arguments);
            
            //This works fine... 
            for(var i = 0; i < this.items.itemAt(2).items.length; i++) {
    			this.items.itemAt(2).items.itemAt(i).on('expand', function(){
    	       			Ext.MessageBox.alert('VVVVVVVVV');
    	       	});
            }
            
            //I DON'T UNDERSTAND THIS PART:
            
            //this.linksPanels = new Array();
            //for(var i = 0; i < 3; i++) {
    			this.linksPanel = this.items.itemAt(2).items.itemAt(0);// <- the panels of the accordion
    			this.linksPanel.on({
    				scope:this
    				,render:function() {
    					this.linksPanel.body.on({
    						scope:this
    						,click:this.onLinkClick
    			//			,delegate:'a.examplelink'
    						,stopEvent:true
    					});
    				}
    			});
            //}
        }, // initComponent
     
        onRender: function() {
            Example.WindowLayout.superclass.onRender.apply(this, arguments);
        }, // onRender
        
        onLinkClick: function() {
        	Ext.MessageBox.alert('AAAAAAAAAAAAAAAAAAAAAA');
        }
    });
     
    Ext.reg('windowlayout', Example.WindowLayout);
    This code will work for 1 panel, e.g. the links of the 1st panel will through the alert when clicked, but when I tried to use an array for the panels I get an error saying that the panels.body doesn't have properties.
    I thought it had to do with lazy rendering of the linksPanels but I really don't understand how it should work.
    Sorry for the long post, I hope someone can help...

    Thanks
    don't have

  2. #2

    Default It works!

    I think I solved it!!
    I'm not sure this is the right way to do it, but this works!!!

    Code:
    for(var i = 0; i < this.items.itemAt(2).items.length; i++) {
       this.linksPanels[i] = this.items.itemAt(2).items.itemAt(i);
       this.linksPanels[i].on({
    	scope:this
    	,render:function(panel) {
    		panel.body.on({
    		        scope:this
    			,click:this.onLinkClick
    			//,delegate:'a.examplelink'
    			,stopEvent:true
    		});
    	}
       });
    }

  3. #3
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996

    Default

    I haven't looked at your code since you say it works now, but FYI there's also an example in the demos for databinding that uses similar approach.
    http://extjs.com/deploy/dev/examples...h-classes.html

  4. #4
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    26

    Default

    In your configurables, you need to add to your new template (tpl class="examplelink" in the anchor tag.


    Regards,

    Actuarybrad

  5. #5

    Default Thanks

    Thanks for the tips guys!
    It starts to make sense

  6. #6
    Ext User
    Join Date
    Jun 2009
    Location
    guthrie Ky
    Posts
    39

    Default I see the data binding in a lot of the examples

    Is there a good one that shows how to fire an event in another component? For instance, I have a grid full of forms and I want the user to be able to edit his form fields when he/she clicks on a row in the grid.... I have it working to the point where the user can click the row then go open the other window and it is on the right form however I want the form to open on click.......it's frust being a noob!
    james Smith
    web data worx
    [email protected]

Posting Permissions

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