PDA

View Full Version : form extend problem



fongus
23 Dec 2010, 1:32 AM
hello,

I have a problem when i try to add a custom form panel to my center region that ever had a panel in.
I think the problems come from my form

here is my custom form


GPmodule.panneauCenterAjoutUser=Ext.extend(Ext.form.FormPanel,{
initComponent:function(){
var config={
id:"panneauCenterAjoutUser",
layout:'card',
items:[{
xtype: 'fieldset',
checkboxToggle: true,
title: 'Informations personnels',
autoHeight: true,
collapsed: true,
defaultType: 'textfield',
items: [{
id: "loginUser",
name: "LoginUser",
fieldLabel: "Login",
allowBlank: false,
blankText: "Le login est obligatoire"
},{
id: "mdpUser",
name: "mdpUser",
fieldLabel: "Mot de passe",
inputType: "password",
allowBlank: false,
blankText: "Le mot de passe est obligatoire"
},
{
id: "nomUser",
name: "nomUser",
fieldLabel: "Nom",
allowBlank: false,
blankText: "Le nom est obligatoire"
},
{
id: "prenomUser",
name: "prenomUser",
fieldLabel: "Prénom",
allowBlank: false,
blankText: "Le prénom est obligatoire"
},
new Ext.form.DateField({
id:"DNUser",
fieldLabel:'Date de naissance',
name: 'DNUser',
format:"d/m/Y",
allowBlank:false,
blankText:"La date de naissance est obligatoire"

}),
{
id: "adresse1User",
name: "adresse1User",
fieldLabel: "Adresse"
},
{
xtype:"NumberField",
id: "CP1User",
name: "CP1User",
fieldLabel: "Code postal",
invalidText:"Doit être un numérique"
},
{
id: "ville1User",
name: "ville1User",
fieldLabel: "Ville"
},
{
id: "pays1User",
name: "pays1User",
fieldLabel: "Pays"
},
{
xtype:"NumberField",
id: "tel1User",
name: "tel1User",
fieldLabel: "Téléphone Personnel",
invalidText:"Doit être un numérique"
},
{
xtype:"NumberField",
id: "tel2User",
name: "tel2User",
fieldLabel: "Téléphone Professionnel",
invalidText:"Doit être un numérique"
},
{
xtype:"NumberField",
id: "tel3User",
name: "tel3User",
fieldLabel: "Téléphone Portable",
invalidText:"Doit être un numérique"
},
{
xtype:"NumberField",
id: "tel4User",
name: "tel4User",
fieldLabel: "Fax",
invalidText:"Doit être un numérique"
},
{
id: "adresseMail1User",
name: "adresseMail1User",
fieldLabel: "Email Personnel",
vtype:'email',
invalidText:"Doit être une adresse email valide"
},
{
id: "adresseMail2User",
name: "adresseMail2User",
fieldLabel: "Email professionnel",
vtype:'email',
invalidText:"Doit être une adresse email valide"
}
]

}]
};
//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
//init component.
GPmodule.panneauCenterAjoutUser.superclass.initComponent.apply(this,arguments);
//gestion du click du bouton du panneau west.
}
,onRender:function() {
// call parent
GPmodule.panneauCenterAjoutUser.superclass.onRender.apply(this, arguments);


}


});

Ext.reg("GPModulePanneauCenterAjoutUser",GPmodule.panneauCenterAjoutUser);



i try to add my form with xtype mode


var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
type: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
};

centerRegion.add(PanneauCenterAjoutUser)


i've got this error
Uncaught TypeError: undefined is not a function

if you have an idea.

thx in advance

Condor
23 Dec 2010, 1:54 AM
Don't you mean 'xtype'?

var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
};

fongus
23 Dec 2010, 2:20 AM
sorry it's an error from my copy and past

var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,

};

other things

Condor
23 Dec 2010, 2:24 AM
xtype:"NumberField" -> xtype:"numberfield"

fongus
23 Dec 2010, 2:49 AM
ok i give you more informations because it 's look like more compicated

response.dtFx[i].nomFx come from my database and the value that is return is "AjoutUser"

so the value for xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,

is GPModulePanneauCenterAjoutUser

as i put it before when i register my componet i do that

Ext.reg("GPModulePanneauCenterAjoutUser",GPmodule.panneauCenterAjoutUser);

so i don't thinck that comes from the synthax. but where ???

Condor
23 Dec 2010, 3:54 AM
That will work just fine. The problem must be somewhere else.

Please post a stacktrace using the -debug version of the Ext library.

fongus
23 Dec 2010, 4:09 AM
ok what i have done in my dev,

when my viewport is rendered i launch an ajax request that permit to create :
a button in the toolbar north region that i add with northRegion.add
a panel west in my west region that i add with westRegion.add
a center pannel that i add with westRegion.add

when i clic on the northButton
I activate my differents west and center pannel

on west activate i do an ajax
to add my GPModulePanneauCenterAjoutUser panel in my center panel


and then i have that.


Uncaught TypeError: undefined is not a function
create/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:10462
Ext.Container.Ext.extend.createComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12866
Ext.Container.Ext.extend.lookupComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12854
Ext.Container.Ext.extend.add/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12701
index/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12697
Ext.apply.each/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.Container.Ext.extend.add/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12696
Ext.Container.Ext.extend.initComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12623
Ext.Panel.Ext.extend.initComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:16855
Ext.Component/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:10548
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
create/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:10462
Ext.Container.Ext.extend.createComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12866
Ext.Container.Ext.extend.lookupComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12854
Ext.Container.Ext.extend.add/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12701
index/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12697
Ext.apply.each/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.Container.Ext.extend.add/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12696
Ext.Container.Ext.extend.initComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12623
Ext.Panel.Ext.extend.initComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:16855
Ext.FormPanel.Ext.extend.initComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:43186
GPmodule.panneauCenterAjoutUser.Ext.extend.initComponentmodules/GPModule/js/mainGPModule.js:131
Ext.Component/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:10548
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
Ext.apply.extend.K/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
create/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:10462
Ext.Container.Ext.extend.createComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12866
Ext.Container.Ext.extend.lookupComponent/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12854
Ext.Container.Ext.extend.add/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:12701
createButtonmodules/GPModule/js/mainGPModule.js:293
Ext.Ajax.request.successmodules/GPModule/js/mainGPModule.js:263
Ext.extend.handleResponse/gproject0/lib/js/ext-3.2.1/ext-all-debug.js:4061
f/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
m/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7
(anonymous function)/gproject0/lib/js/ext-3.2.1/adapter/ext/ext-base.js:7

Condor
23 Dec 2010, 4:53 AM
It complains that it doesn't know your xtype. Are you sure the file in which it is registered is loaded and doesn't have javascript errors?

fongus
23 Dec 2010, 5:52 AM
in chrome i have no error before.

my component are load in the same file

first is my form panel then my west panel with the ajax request below i try to add my new panel to activate later.

here is the configuration of my west panel that i add in my westRegion
the aim of this pannel his load button and add panels links to that button



GPmodule.PanneauWest=Ext.extend(Ext.Panel,{

layout: {
type:'vbox',
padding:'5',
align:'stretch'
},

initComponent: function(){
var config = {
defaults:{margins:'0 0 5 0'},
border:false,

};
//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
//init component.

//manage activation of i have to add and displai
this.on({
activate:function(Panel){

var idModule=Ext.getCmp("GPModuleBoutonNorth").num;

Ext.Ajax.request({
url:"../logguer/modules/GPModule/php/ajaxLoadDtFonctionnalite.php"
,params: {numModule:idModule}
,success: function(response, opts) {
var obj = Ext.decode(response.responseText);

//Create my button in the westpanel and add new pannels in center

Panel.createButton(obj);

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


//create and add buton and panel for the west en center pannel
this.createButton= function(response){
var panneauCenter=Ext.getCmp("centerID");

if (response.success != false) {
for (i = 0; i < response.dtFx.length; i++) {
//create button and panels

switch (response.dtFx[i].nomFx){
case "AjoutUser":
//chargement du bouton dans le panneau du centre
var boutonAjoutUser=Ext.getCmp("ajoutUser");
boutonAjoutUser.setVisible(true);
//ajout du formulaire dans le panneau centre
var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
layout:'card'
};



panneauCenter.add(PanneauCenterAjoutUser);

break;
case "VisuUser":
var boutonVisu= {
id: "GPModule" + response.dtFx[i].nomFx,
xtype: "GPModule" + response.dtFx[i].nomFx,
tooltip: response.dtFx[i].detailsFx,
dtAccess: response.dtFx[i].dtFx,
numFx: response.dtFx[i].numFx
}
//alert(boutonVisu);
this.add(boutonVisu);
break;
}

//ajoute le bouton au pannel
//this.add(boutonsWest);
//ajoute les panneaux centraux correspondant

}
}else{
alert("pas le droit");
}
//Refresh pannel
panneauCenter.doLayout();
this.doLayout();
}
GPmodule.PanneauWest.superclass.initComponent.apply(this,arguments);
},//fin init

});
Ext.reg('GPModulePanneauWest',GPmodule.PanneauWest);



may be the problem come from here.

fongus
23 Dec 2010, 6:01 AM
i have no error before in chrome

i load everything in one file.

here is the west pannel that i add to my viewport
I use onActivate in this panel to call an ajax request and add my GPModulePanneauCenterAjoutUser panel in my center panel



GPmodule.PanneauWest=Ext.extend(Ext.Panel,{

layout: {
type:'vbox',
padding:'5',
align:'stretch'
},

initComponent: function(){
var config = {
defaults:{margins:'0 0 5 0'},
border:false,

};
//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
//init component.

//gestion du click du bouton du panneau west.
this.on({
activate:function(Panel){
//récupere l'id du module concerne
var idModule=Ext.getCmp("GPModuleBoutonNorth").num;
//if(!Ext.getCmp("GPModulePanneauWest"))
Ext.Ajax.request({
url:"../logguer/modules/GPModule/php/ajaxLoadDtFonctionnalite.php"
,params: {numModule:idModule}
,success: function(response, opts) {
var obj = Ext.decode(response.responseText);

//Create and add panels

Panel.createButton(obj);

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


//create and add panel
this.createButton= function(response){
var panneauCenter=Ext.getCmp("centerID");
//alert(panneauCenter);
if (response.success != false) {
for (i = 0; i < response.dtFx.length; i++) {
//creer les éléments correspondant à chaque fonctionnalité.
switch (response.dtFx[i].nomFx){
case "AjoutUser":
//chargement du bouton dans le panneau du centre
var boutonAjoutUser=Ext.getCmp("ajoutUser");
boutonAjoutUser.setVisible(true);
//ajout du formulaire dans le panneau centre
var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
//layout:'card'
};

//alert("GPModulePanneauCenter"+ response.dtFx[i].nomFx);

panneauCenter.add(PanneauCenterAjoutUser);

break;
case "VisuUser":
var boutonVisu= {
id: "GPModule" + response.dtFx[i].nomFx,
xtype: "GPModule" + response.dtFx[i].nomFx,
tooltip: response.dtFx[i].detailsFx,
dtAccess: response.dtFx[i].dtFx,
numFx: response.dtFx[i].numFx
}
//alert(boutonVisu);
this.add(boutonVisu);
break;
}

//ajoute le bouton au pannel
//this.add(boutonsWest);
//ajoute les panneaux centraux correspondant

}
}else{
alert("pas le droit");
}
//rafraichissement des panneaux
panneauCenter.doLayout();
this.doLayout();
}
GPmodule.PanneauWest.superclass.initComponent.apply(this,arguments);
},//fin init

});
Ext.reg('GPModulePanneauWest',GPmodule.PanneauWest);


may be the problems come from here

fongus
23 Dec 2010, 6:03 AM
i have no error before in chrome

i load everything in one file.

here is the west pannel that i add to my viewport
I use onActivate in this panel to call an ajax request and add my GPModulePanneauCenterAjoutUser panel in my center panel



GPmodule.PanneauWest=Ext.extend(Ext.Panel,{

layout: {
type:'vbox',
padding:'5',
align:'stretch'
},

initComponent: function(){
var config = {
defaults:{margins:'0 0 5 0'},
border:false,

};
//apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
//init component.

//gestion du click du bouton du panneau west.
this.on({
activate:function(Panel){
//récupere l'id du module concerne
var idModule=Ext.getCmp("GPModuleBoutonNorth").num;
//if(!Ext.getCmp("GPModulePanneauWest"))
Ext.Ajax.request({
url:"../logguer/modules/GPModule/php/ajaxLoadDtFonctionnalite.php"
,params: {numModule:idModule}
,success: function(response, opts) {
var obj = Ext.decode(response.responseText);

//Create and add panels

Panel.createButton(obj);

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


//create and add panel
this.createButton= function(response){
var panneauCenter=Ext.getCmp("centerID");
//alert(panneauCenter);
if (response.success != false) {
for (i = 0; i < response.dtFx.length; i++) {
//creer les éléments correspondant à chaque fonctionnalité.
switch (response.dtFx[i].nomFx){
case "AjoutUser":
//chargement du bouton dans le panneau du centre
var boutonAjoutUser=Ext.getCmp("ajoutUser");
boutonAjoutUser.setVisible(true);
//ajout du formulaire dans le panneau centre
var PanneauCenterAjoutUser = {
id: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
xtype: "GPModulePanneauCenter" + response.dtFx[i].nomFx,
//layout:'card'
};

//alert("GPModulePanneauCenter"+ response.dtFx[i].nomFx);

panneauCenter.add(PanneauCenterAjoutUser);

break;
case "VisuUser":
var boutonVisu= {
id: "GPModule" + response.dtFx[i].nomFx,
xtype: "GPModule" + response.dtFx[i].nomFx,
tooltip: response.dtFx[i].detailsFx,
dtAccess: response.dtFx[i].dtFx,
numFx: response.dtFx[i].numFx
}
//alert(boutonVisu);
this.add(boutonVisu);
break;
}

//ajoute le bouton au pannel
//this.add(boutonsWest);
//ajoute les panneaux centraux correspondant

}
}else{
alert("pas le droit");
}
//rafraichissement des panneaux
panneauCenter.doLayout();
this.doLayout();
}
GPmodule.PanneauWest.superclass.initComponent.apply(this,arguments);
},//fin init

});
Ext.reg('GPModulePanneauWest',GPmodule.PanneauWest);


may be the problems come from here

fongus
3 Jan 2011, 2:31 AM
RRRRRRAAAA,

I found where the problem comes from :

I put an xtype with NumberField or normaly it's numberfield