PDA

View Full Version : Impossible to assign a bbar (defined in a standalone file) to a form



American horizon
22 Jun 2016, 3:59 AM
Hi, i've this form:



Ext.define('CS.view.TitolareForm', {
extend: "Ext.form.Panel",
bbar: Ext.create("CS.view.FormBbar"), //<----------------WATCH THERE
alias: 'widget.titolareform',
bodyPadding: 5,
width: 750,
mode: "",
headers: { 'Content-Type': 'application/json;charset=utf-8' },
url: "titolari",
title: "Anagrafica",
layout: 'vbox',
height: 400,
width: 800,
fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
},
defaults: {
margin: '0 0 0 0',
disabledCls: 'form-field-disabled'
},
defaultType: 'textfield',

items:[
{
xtype:"textfield",
name:"id",
hidden: true
},

//****PRIMA RIGA
{
xtype: "container",

layout: "hbox",
width: 750,
defaultType: 'textfield',
defaults: { margin: '10 10 10 10',
disabledCls: 'form-field-disabled'},
flex:1,
items: [
{
fieldLabel: 'Nome',
name: 'nome',
allowBlank: true,
flex:1,

},
{
fieldLabel: 'Cognome',
name: 'cognome',
flex:1,
allowBlank: true,

},
{
fieldLabel: 'Ragione Sociale',
name: 'ragioneSociale',
flex:1,
allowBlank: true,

},
{
fieldLabel: 'Sesso',
name: 'sesso',
allowBlank: true,
store: 'Sesso',
displayField: "cod_sesso",
valueField: "cod_sesso",
flex: 0.2
}
]
},


//****SECONDA RIGA
{
xtype: "container",
layout: "hbox",
width: 750,
defaultType: 'textfield',
defaults: {
margin: '10 10 10 10',
disabledCls: 'form-field-disabled'
},
flex:1,
items: [
{
xtype: "datefield",
alias: "dataNascita",
fieldLabel: 'Data di Nascita',
name: 'dataNascita',
allowBlank: true,
disabledCls: 'form-field-disabled',
width: 100,
dateFormat: 'dd-mm-yyyy',
listeners: {
select: function( field, value, eOpts ){
field.fireEvent("dataNascitaSelected", field);
},
blur: function( field, value, eOpts ){
field.fireEvent("dataNascitaSelected", field);
},
render: function( field, value, eOpts ){
field.fireEvent("dataNascitaSelected", field);
}
}
},
{
fieldLabel: '#',
labelSeparator : "",
name: '',
alias: "txtNazioneNascita",
allowBlank: true,
width:35,
isFormField: false,
disabledCls: 'form-field-disabled',
margin: "10 0 10 10",
enableKeyEvents:true,
listeners: {
keyup: function(textfield, e, eOpts ){
this.up("form").fromTxtToCombo(textfield.getValue(), "cmbNazioneNascita");
}
}
},

{
xtype: 'combobox',
queryMode: "local",
alias: 'cmbNazioneNascita',
fieldLabel: 'Nazione di Nascita',
name: 'idNazioneNascita',
margin: "10 10 10 0",
allowBlank: true,
displayField: "label",
valueField: "id",
listeners: {
select: function( combo ){
this.up("form").fromComboToTxt(combo.getValue(), "txtNazioneNascita");
},
focus: function( combo, The, eOpts ){
this.up("form").fromComboToTxt(combo.getValue(), "txtNazioneNascita");
}
}
},
{
fieldLabel: '#',
labelSeparator : "",
name: '',
alias: "txtProvinciaNascita",
allowBlank: true,
isFormField: false,
width:35,
margin: "10 0 10 10",
enableKeyEvents:true,
listeners: {
keyup: function(textfield, e, eOpts ){
this.up("form").fromTxtToCombo(textfield.getValue(), "cmbProvinciaNascita");
}
}
},
{
xtype: 'combobox',
alias: 'cmbProvinciaNascita',
queryMode: "local",
margin: "10 10 10 0",
fieldLabel: 'Provincia di Nascita',
name: 'idProvinciaNascita',
allowBlank: true,
displayField: "label",
valueField: "id",
listeners: {
select: function( combo, records, eOpts ){
console.log("SELECT EVENT");
this.up("form").down("[alias=cmbProvinciaNascita]").fireEvent("provinciaSelected", combo, this.up("form").down("[alias=cmbComuneNascita]"));

this.up("form").fromComboToTxt(combo.getValue(), "txtProvinciaNascita");
},
focus: function( combo, The, eOpts ){

this.up("form").fromComboToTxt(combo.getValue(), "txtProvinciaNascita");
},
}
},

{
fieldLabel: '#',
labelSeparator : "",
name: '',
alias: "txtComuneNascita",
allowBlank: true,
width:35,
isFormField: false,
margin: "10 0 10 10",
listeners: {
'change': function(obj, newValue, oldValue, eOpts ){
this.up("form").fromTxtToCombo(newValue, "cmbComuneNascita");
}
}
},
{
xtype: 'combobox',
alias: "cmbComuneNascita",
queryMode: "local",
margin: "10 10 10 0",
fieldLabel: 'Comune di Nascita',
name: 'idComuneNascita',
displayField: "label",
valueField: "id",
allowBlank: true,
flex: 1,
listeners: {
'select': function( combo, records, eOpts ){
this.up("form").fromComboToTxt(combo.getValue(), "txtComuneNascita");
},

focus: function( combo, The, eOpts ){
this.up("form").fromComboToTxt(combo.getValue(), "txtComuneNascita");
},
change: function(combo, newValue, oldValue, eOpts ){
console.log("CHANGE EVENT");
this.up("form").down("[alias=localitaNascita]").setValue(combo.getRawValue());
}
}

},
]
},

//****TERZA RIGA
{
xtype: "container",
layout: "hbox",
width: 750,
defaultType: 'textfield',
defaults: {
margin: '10 10 10 10',
disabledCls: 'form-field-disabled'
},
flex:1,
items: [

{
fieldLabel: 'Localita\' di Nascita',
name: 'localitaNascita',
alias: 'localitaNascita',
allowBlank: true,
readOnly: true,
cls: "form-field-disabled"

},
{
fieldLabel: 'Codice Fiscale',
name: 'codiceFiscale',
allowBlank: true,
flex: 1,

},
{
fieldLabel: 'Partita IVA',
name: 'partitaIVA',
allowBlank: true,
flex: 1,
}
]
},

//**** QUARTA RIGA
{
xtype: "container",
layout: "hbox",
width: 750,
defaultType: 'textfield',
defaults: {
margin: '10 10 10 10',
disabledCls: 'form-field-disabled'
},
flex:1,
items: [
{
xtype: 'combobox',
alias: "cmbNazionalita",
queryMode: 'local',
fieldLabel: 'Nazionalita\'',
name: 'idNazionalita',
allowBlank: true,
flex: 1,
displayField: "label"
},
{
fieldLabel: '#',
alias: "txtAcCompetenza",
labelSeparator : "",
name: '',
isFormField: false,
allowBlank: true,
margin: "10 0 10 10",
width:35,
listeners: {
'change': function(obj, newValue, oldValue, eOpts ){
this.up("form").fromTxtToCombo(newValue, "cmbAcCompetenza");
}
}
},
{
xtype: 'combobox',
alias: 'cmbAcCompetenza',
fieldLabel: 'AC Competenza',
queryMode: "local",
name: 'acCompetenza',
margin: "10 10 10 0",
allowBlank: true,
displayField: "label",
valueField: "id",
flex: 1,
listeners: {
select: function( combo, records, eOpts ){
this.up("form").fromComboToTxt(combo.getValue(), "txtAcCompetenza");
},

focus: function( combo, The, eOpts ){
this.up("form").fromComboToTxt(combo.getValue(), "txtAcCompetenza");
},
}
},
{
xtype: 'checkbox',
fieldLabel: 'Licenziabile',
name: 'flagLicenziabile',
allowBlank: true,
inputValue: 1,
uncheckedValue: 0,

},
{
xtype: 'checkbox',
fieldLabel: 'Riservato',
name: 'flagRiservato',
allowBlank: true,
inputValue: 1,
uncheckedValue: 0,

}
]
},

//****QUINTA RIGA

{
xtype: "container",
layout: "hbox",
width: 750,
defaultType: 'textfield',
defaults: {
margin: '10 10 10 10',
disabledCls: 'form-field-disabled'
},
flex:1,
items: [
{
fieldLabel: 'Utente Creazione',
name: 'idUtenteCreazione',
allowBlank: true,
flex: 1,

},
{
xtype: "datefield",
fieldLabel: 'Data Creazione',
name: 'dataCreazione',
allowBlank: true,
width: 100,
},
{
fieldLabel: 'Utente Modifica',
name: 'idUtenteModifica',
allowBlank: true,
flex: 1,
},
{
xtype: "datefield",
fieldLabel: 'Data Modifica',
name: 'dataModifica',
allowBlank: true,
width: 100,
}
]
}
],


bbar: Ext.create("CS.view.FormBbar"),

}
});


and this is the code of FormBbar


Ext.define('CS.view.FormBbar' ,{
extend: 'Ext.toolbar.Toolbar',
alias: 'widget.formbbar',



items: [
{
text: 'Ripristina',
alias: 'btnRipristina',
icon: './images/extras/undo.png',
handler: function() {
this.up('form').getForm().loadRecord(this.up('form').getForm().getRecord());
this.up('form').down("[alias=cmbProvinciaNascita]").fireEvent("provinciaSelected", this.up('form').down("[alias=cmbProvinciaNascita]"), this.up("form").down("[alias=cmbComuneNascita]"));
}
},
{
//text: '<span style="color:white">Salva</style>',
text: "Salva",
alias: 'btnSalva',
//formBind: true, //only enabled once the form is valid
disabled: true,
icon: './images/extras/floppy.png',
//style: "background-image: url('./images/extras/green.png') !important;"
},*/
/* {
//text: '<span style="color:white">Invia Modifiche</span>',
text: "Salva",
alias: 'btnModifica',
formBind: true, //only enabled once the form is valid
disabled: true,
icon: './images/extras/floppy.png',
//style: "background-image: url('./images/extras/orange.png') !important"
},
{
// text: '<span style="color:white">Conferma Eliminazione</span>',
text: "Elimina",
alias: 'btnElimina',
icon: './images/extras/minus.png',
// style: "background-image: url('./images/extras/red.jpeg') !important"
}

],


/*initComponent: function() {



this.callParent(arguments);
}*/
});




When i open the form the first time all seems to work correctly. But when i close it and attempt to reinstantiate it, i see the error

Cannot read property 'addCls' of nulladdCls @ combined.js.h1106792308.pack:1849configureItem @ combined.js.h1106792308.pack:2832renderItem @ combined.js.h1106792308.pack:2072renderItems @ combined.js.h1106792308.pack:2826renderChildren @ combined.js.h1106792308.pack:2822invalidate @ combined.js.h1106792308.pack:6232invalidate @ combined.js.h1106792308.pack:6233invalidate @ combined.js.h1106792308.pack:6233flushInvalidates @ combined.js.h1106792308.pack:6227run @ combined.js.h1106792308.pack:6254flushLayouts @ combined.js.h1106792308.pack:1745updateLayout @ combined.js.h1106792308.pack:1746updateLayout @ combined.js.h1106792308.pack:1868onShow @ combined.js.h1106792308.pack:1770callParent @ combined.js.h1106792308.pack:258onShow @ combined.js.h1106792308.pack:2005callParent @ combined.js.h1106792308.pack:258onShow @ combined.js.h1106792308.pack:2961callParent @ combined.js.h1106792308.pack:258onShow @ combined.js.h1106792308.pack:4638show @ combined.js.h1106792308.pack:2004callback @ combined.js.h-225419762.pack:6waitForRequestedRange @ combined.js.h1106792308.pack:4049fire @ combined.js.h1106792308.pack:567continueFireEvent @ combined.js.h1106792308.pack:676fireEventArgs @ combined.js.h1106792308.pack:674fireEvent @ combined.js.h1106792308.pack:674addPage @ combined.js.h1106792308.pack:3948cachePage @ combined.js.h1106792308.pack:4066onProxyPrefetch @ combined.js.h1106792308.pack:4063processResponse @ combined.js.h1106792308.pack:3908(anonymous function) @ combined.js.h1106792308.pack:3922callback @ combined.js.h1106792308.pack:461onComplete @ combined.js.h1106792308.pack:1958onStateChange @ combined.js.h1106792308.pack:1955(anonymous function) @ combined.js.h1106792308.pack:148

jdkhamba
22 Jun 2016, 4:41 AM
I think bbar should not be a part of the Ext.define of the form panel. It should be created on the fly everytime you create an object of the formpanel type. Take a look at this example:

https://fiddle.sencha.com/#fiddle/1cf1

American horizon
22 Jun 2016, 4:59 AM
According to my code, i correctly istantiate a different bbar in each form panel
bbar: Ext.create("CS.view.FormBbar"),

or not?

jdkhamba
22 Jun 2016, 5:13 AM
No you don't. It is instantiated only once during definition.You need to create the bbar every time you call Ext.create(your_form_panel), in the same way shown in the fiddle I provided.

American horizon
22 Jun 2016, 6:12 AM
And for what reason writing bbar:{ xtype: "formbbar" },inside form panel definition it's work fine?

jdkhamba
22 Jun 2016, 7:14 AM
I don't understand your question.