PDA

View Full Version : toolbar not rendered



fongus
15 Oct 2010, 12:23 AM
hello everyone,

I try to load toolbar button from an ajax.request but when i use addbutton function, buttons are not displayed.

here is my code.


panneauPrincipale.viewPort=Ext.extend(Ext.Viewport,{
layout: 'border',
initComponent:function() {
var config = {
items: [{
region: 'north',
layout:"border",
border: false,
bbar: {
id: 'mainMenu',
//loadbutton
}
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

panneauPrincipale.viewPort.superclass.initComponent.apply(this, arguments);
.

this.bbarNorth=Ext.getCmp("mainMenu");
this.bbarNorth.on({
beforeRender: this.loadbbarNorth
});

}
,loadbbarNorth:function(){ //chargement de la toolbar
var tbNorhConfig="";
//va chercher les modules correspondant à l'utilisateur.
Ext.Ajax.request({
url:"../php/AjaxVerifDtUser.php"
,success: function(response, opts) {
var obj = Ext.decode(response.responseText);
var virg="";

for(i=0;i<obj.res.length;i++){
//creer le l'object correspondant
var tbNorhConfig ={
id:obj.res[i].nomModule+"BoutonNorth",
xtype:obj.res[i].nomModule+"Button",
dtAccess:obj.res[i].droitAcces,
num:obj.res[i].numModule
//xtype:'tbseparator'

};
Ext.getCmp("mainMenu").addButton(tbNorhConfig);

}

},
failure: function(response, opts) {
//console.log('server-side failure with status code ' + response.status);
}
});
}
I don't know why it's does'nt display it.

Animal
15 Oct 2010, 2:30 AM
This same question was asked yesterday!

fongus
15 Oct 2010, 3:59 AM
ok,

i found a temporary solution.
here is my code


panneauPrincipale.viewPort=Ext.extend(Ext.Viewport,{
layout: 'border',

initComponent:function() {
var config = {
items: [{
id:"northID",
region: 'north',
height:25,
border: false,
bbar: {
id: 'mainMenu',
//Charger tous les boutons items correspondant.
}
}
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));

panneauPrincipale.viewPort.superclass.initComponent.apply(this, arguments);
//fonction de communication entre les éléments.
//initialisation des boutons et pannea à chargé.
this.bbarNorth=Ext.getCmp("mainMenu");
this.bbarNorth.on({
afterRender: this.loadbbarNorth
});

}
,loadbbarNorth:function(){ //chargement de la toolbar
var tbNorhConfig="";

//va chercher les modules correspondant à l'utilisateur.
Ext.Ajax.request({
url:"../php/AjaxVerifDtUser.php"
,success: function(response, opts) {
var obj = Ext.decode(response.responseText);
var virg="";
//récupération et création des boutons north panel
for(i=0;i<obj.res.length;i++){
//creer le l'object correspondant
var tbNorhConfig ={
id:obj.res[i].nomModule+"BoutonNorth",
xtype:obj.res[i].nomModule+"Button",
dtAccess:obj.res[i].droitAcces,
num:obj.res[i].numModule
//xtype:'tbseparator'

};

Ext.getCmp("mainMenu").add(tbNorhConfig);

}
Ext.getCmp("northID").doLayout();
},
failure: function(response, opts) {
//console.log('server-side failure with status code ' + response.status);
}
});

}
i just add Ext.getCmp("northID").doLayout();
and put a height:25 in my viewport.

in fact,
My button is correctly create but my toolbar in my north panel is not resized,
do you know why ?

Animal
15 Oct 2010, 4:13 AM
That is correct. As you would see in that thread from yesterday, doLayout is needed to tell the Container to ensure all its child items are rendered.

I think the Toolbar is in fact being sized... "stretching" to accomodate those buttons.

But your north is a Panel 25pixels high, and just stretching its toolbar doesn't change this.

It looks to be like you want the Toolbar as the north region. You don't need a Panel for any reason do you?

fongus
15 Oct 2010, 6:10 AM
ok,

I will use my north panel to add not only the toolbar.
that's why i have created one.

if i remove the
height:25 config, my toolbar disapear.
How i can create my toolbar without this cheat code :)

Animal
15 Oct 2010, 6:31 AM
Oh, you are going to use that Panel for some other content.

If you are not going to use a splitter to resize that, then it may be better for you to use vbox layout instead of border.

Make the top Panel autoHeight: true, and the bottom one flex: 1

After updating the Toolbar call doLayout on the Viewport