PDA

View Full Version : Components communication



fongus
8 Oct 2010, 12:31 AM
hello,

i try to understand the saki's Ext Components communication example. http://examples.extjs.eu/
and i try to use it in my application.

I create a preconfigured button like this in button.js file.


Ext.ns("GPmodule");

//Création du bouton qui chargera la page.
GPmodule.bouton= Ext.extend(Ext.Button,{
initComponent:function(){
Ext.apply(this,{
id:"GPModuleBoutonNorth",
hidden: false,
text: 'Gestions Utilisateurs',
handler: this.loadPanel,
border:true,
iconCls:'GPModuleUser'
});
GPmodule.bouton.superclass.initComponent.apply(this,arguments);
},

loadPanel:function(){
alert("toto");

},
onRender: function(){
GPmodule.bouton.superclass.onRender.apply(this, arguments);

}
});

Ext.reg('GPModuleButton',GPmodule.bouton);
I use this button in a viewport in the north bbar
like this



Ext.ns("panneauPrincipale");

panneauPrincipale.tbNorth = {
id: 'mainMenu',

items: [{
xtype:"GPModuleButton"
},"-"]
};

panneauPrincipale.viewPort=Ext.extend(Ext.Viewport,{
layout: 'border',
initComponent:function() {
var config = {
items: [{
region: 'north',
border: false,
bbar: panneauPrincipale.tbNorth,

}, {
region: 'west',
title: 'Menu',
layout: 'card',
collapsible: false,
split: true,
width: 200,
}, {
region: 'center',
layout: 'card',
title: 'Center',
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

panneauPrincipale.viewPort.superclass.initComponent.apply(this, arguments);
//fonction de communication entre les éléments.
this.GPModuleButton.on({

})
}
,onRender:function(){
panneauPrincipale.viewPort.superclass.onRender.apply(this, arguments);
}

});
when i use this.GPModuleButton.on({ //do something})


firebug said that this.GPModuleButton is undefined

I'm sure that i miss something but what i don't know.
if someone can help me ?

thx in advance

Condor
8 Oct 2010, 12:50 AM
Why do you expect that panneauPrincipale.viewPort contains a property named GPModuleButton?

You have no code that creates this property...

fongus
8 Oct 2010, 1:29 AM
Condor thx for your anwser,
i think because it's in my bbar norh region, and i declare it as an xtype
so how i can declare it as the saki's ext example do ?



Ext.ns('Example');

// {{{
Example.LinksPanel = Ext.extend(Ext.Panel, {

// configurables
border:false
,cls:'link-panel'
,links:[{
text:'Link 1'
,href:'#'
},{
text:'Link 2'
,href:'#'
},{
text:'Link 3'
,href:'#'
}]
,layout:'fit'
,tpl:new Ext.XTemplate('<tpl for="links"><a class="examplelink" href="{href}">{text}</a></tpl>')

// {{{
,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.Window = Ext.extend(Ext.Window, {

// configurables
// anything what is here can be configured from outside
layout:'border'

// {{{
,initComponent:function() {

// hard coded config - cannot be changed from outside
var config = {
items:[{
xtype:'linkspanel'
,region:'west'
,width:200
,collapsible:true
,collapseMode:'mini'
,split:true
},{
xtype:'tabpanel'
,region:'center'
,border:false
,activeItem:0
,items:[{
title:'A tab'
}]
}]
};

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Example.Window.superclass.initComponent.apply(this, arguments);

this.linksPanel = this.items.itemAt(0);
this.tabPanel = this.items.itemAt(1);

this.linksPanel.on({})

Condor
8 Oct 2010, 1:45 AM
Something like:

this.GPModuleButton = this.getLayout().north.panel.getBottomToolbar().getComponent(0);

fongus
11 Oct 2010, 5:42 AM
ok I modify my script and i add an ID


panneauPrincipale.tbNorth= {
id: 'mainMenu',
//Charger tous les boutons items correspondant.
items: [{
id:"GPModuleBoutonNorth",
xtype:"GPModuleButton" // /logguer/modules/GPModule/js/mainGPModule.js
},"-"]
};


and i try to get the parent or the button but i have the same error.



this.GPModuleButton.getCmp("mainMenu")
or
this.GPModuleButton.getCmp("GPModuleBoutonNorth")


I try in afterRender et in render function but nothing happens

any idea ?

Condor
11 Oct 2010, 5:44 AM
You mean:

this.GPModuleButton = Ext.getCmp("GPModuleBoutonNorth");

fongus
11 Oct 2010, 6:36 AM
yes, and it doesn't work.

I suppose it's because my component it's not create when i tried to get it or something like

i tried in a after function and i have the same thing.

any idea ?

Condor
11 Oct 2010, 7:01 AM
You can only do this after the superclass initComponent has been called.

fongus
11 Oct 2010, 11:25 PM
pffff.

ok I found what was the problem.
I forget to put the id in the declaration of my preconfigured button

and call it correctly with Ext.getcmp

thanks for your help condor

fongus
12 Oct 2010, 3:21 AM
ok i solve my probleme

i forgot to put the id when i call my preconfigured xtype
and when i use Ext.getCmp it's works.

thx for your help condor