PDA

View Full Version : Change value in a textfield



DJ JJ
19 Jan 2011, 9:56 AM
I have a wizard with various cards. When moving form the first card to the second, I need to change the value of a textfield (with autoref set to portatcp) in the second card, so I tried to use this piece of code:



this.portatcpip.setValue('123');
alert(this.portatcpip.getValue());


the alert show me the correct value (123) but the textfield is not updated and it shows the previous default value. I tried also to put

this.portatcpip.update();

after the alert, but nothing happened. Do I wrong anything?

code of the implementation:



nuovaconndb = Ext.extend(nuovaconndbUi, {
initComponent: function() {
nuovaconndb.superclass.initComponent.call(this);
this.btnNext.on('click', this.onConfirmBtnNext, this);
this.btnBack.on('click', this.onConfirmBtnBack, this);
this.btnCancel.on('click', this.onConfirmBtnCancel, this);
this.nomeconndb.on('keyup', this.pressione, this);
this.hostdb.on('keypress', this.pressione1, this);
this.portatcpip.on('keyup', this.pressione1, this);
this.nomedb.on('keyup', this.pressione1, this);
}

,pressione: function(){
var val=this.nomeconndb.getValue();
if(val)
this.btnNext.setDisabled(false);
else
this.btnNext.setDisabled(true);
}

,pressione1: function(){
alert('rrrr');
var val1=this.hostdb.getValue();
var val2=this.portatcpip.getValue();
var val3=this.nomedb.getValue();
if(val1 && val2 && val3)
this.btnNext.setDisabled(false);
else
this.btnNext.setDisabled(true);
}

,onConfirmBtnNext: function(){
var l = Ext.getCmp('nuovaconndb').getLayout();
var i = l.activeItem.id.split('card-')[1];
switch(i){
case '1':
var scelta=this.typeconn.getValue();
switch(scelta){
case 'Native (JDBC)':
l.setActiveItem(1);
break;
case 'ODBC':
l.setActiveItem(2);
break;
case 'OCI':
l.setActiveItem(4);
break;
case 'JNDI':
l.setActiveItem(3);

this.hostdb.setValue('123');
alert(this.hostdb.getValue());

this.portatcpip.setValue('123');
alert(this.portatcpip.getValue());

this.portatcpip.validate();
this.portatcpip.update();


break;
}
this.btnNext.setDisabled(true);
this.btnBack.setDisabled(false);
break;
case '2':
l.setActiveItem(6);
this.btnNext.setDisabled(false);
break;
case '3':
break;
case '4':
break;
case '5':
break;
case '6':
break;
case '7':
break;

}
}

,onConfirmBtnCancel: function() {
this.close();
}
});



code of the ui.js file:



nuovaconndbUi = Ext.extend(Ext.Window, {
title: 'Wizard Nuova Connessione',
width: 611,
height: 368,
layout: 'card',
activeItem: 0,
id: 'nuovaconndb',
initComponent: function() {
this.bbar = {
xtype: 'toolbar',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: '< Back ',
disabled: true,
ref: '../btnBack'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
text: 'Next >',
disabled: true,
ref: '../btnNext'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
text: 'Finish',
disabled: true,
ref: '../btnFinish'
},
{
xtype: 'tbspacer',
width: 10
},
{
xtype: 'button',
text: 'Cancel',
ref: '../btnCancel'
}
]
};
this.items = [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-1',
items: [
{
xtype: 'container',
width: 524,
height: 71,
id: 'asd',
items: [
{
xtype: 'displayfield',
value: 'Seleziona il nome del database e il tipo',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione'
},
{
xtype: 'displayfield',
value: 'Seleziona \'next\' per procedere'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome della connessione database',
anchor: '100%',
allowBlank: false,
enableKeyEvents: true,
ref: '../nomeconndb',
id: 'nomeconndb'
},
{
xtype: 'combo',
fieldLabel: 'Tipo di database a cui connettersi',
anchor: '100%',
store: 'storeDB',
displayField: 'nomeDB',
valueField: 'nomeDB',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
value: 'IBM DB2',
allowBlank: false,
ref: '../typedb',
id: 'typedb'
},
{
xtype: 'combo',
fieldLabel: 'Tipo di accesso al database da usare',
anchor: '100%',
store: 'accessDB',
triggerAction: 'all',
mode: 'local',
valueField: 'tipoaccesso',
displayField: 'tipoaccesso',
forceSelection: true,
allowBlank: false,
value: 'Native (JDBC)',
ref: '../typeconn',
id: 'typeconn'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-2',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Impostare i parametri JDBC',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione1'
},
{
xtype: 'displayfield',
value: ' Inserire il nome host del server database, la porta ed il nome del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome host del server database',
anchor: '100%',
ref: '../hostdb',
id: 'hostdb'
},
{
xtype: 'numberfield',
fieldLabel: 'La porta TCP/IP',
anchor: '100%',
value: 50000,
ref: '../portatcpip',
id: 'portatcpip'
},
{
xtype: 'textfield',
fieldLabel: 'Il nome del database',
anchor: '100%',
ref: '../nomedb',
id: 'nomedb'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-3',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare la sorgente dati ODBC DSN',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione2'
},
{
xtype: 'displayfield',
value: ' Inserire il nome della sorgente dati ODBC DSN'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome della sorgente dati ODBC DSN',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-4',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Impostare i parametri JDBC',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione3'
},
{
xtype: 'displayfield',
value: ' Inserire il nome host del server database, la porta ed il nome del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome host del server database',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'La porta TCP/IP',
anchor: '100%',
value: -1
},
{
xtype: 'textfield',
fieldLabel: 'Il nome del database',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-5',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare il database TNS Oracle',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione4'
},
{
xtype: 'displayfield',
value: ' Inserire il nome del database Oracle TNSNAMES'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome del database TNS Oracle',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-6',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare i parametri Oracle',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione5'
},
{
xtype: 'displayfield',
value: 'Seleziona "next" per procedere'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Tablespace dei dati',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Tablespace indice',
anchor: '100%'
},
{
xtype: 'combo',
fieldLabel: 'Versione',
anchor: '100%',
store: 'versionewiz',
displayField: 'versione',
mode: 'local',
triggerAction: 'all',
typeAhead: true,
valueField: 'versione',
value: '8i',
forceSelection: true
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-7',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Imposta utente e password',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione6'
},
{
xtype: 'displayfield',
value: 'Seleziona "Finisci" per creare una connessione del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Utente',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '100%'
},
{
xtype: 'button',
text: 'Prova la connessione al database'
}
]
}
];
nuovaconndbUi.superclass.initComponent.call(this);
}
});

Screamy
19 Jan 2011, 11:31 AM
It's hard to say without having code to look at, but I'm willing to bet it's a lazy-load problem with the second card. Are you using xtypes for the panels in the card layout?

DJ JJ
19 Jan 2011, 12:24 PM
Here is my code, I created it with the Designer:

This is the .ui.js file




nuovaconndbUi = Ext.extend(Ext.Window, {
title: 'Wizard Nuova Connessione',
width: 611,
height: 368,
layout: 'card',
activeItem: 0,
id: 'nuovaconndb',
initComponent: function() {
this.bbar = {
xtype: 'toolbar',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
text: '< Back ',
disabled: true,
ref: '../btnBack'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
text: 'Next >',
disabled: true,
ref: '../btnNext'
},
{
xtype: 'tbspacer'
},
{
xtype: 'button',
text: 'Finish',
disabled: true,
ref: '../btnFinish'
},
{
xtype: 'tbspacer',
width: 10
},
{
xtype: 'button',
text: 'Cancel',
ref: '../btnCancel'
}
]
};
this.items = [
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-1',
items: [
{
xtype: 'container',
width: 524,
height: 71,
id: 'asd',
items: [
{
xtype: 'displayfield',
value: 'Seleziona il nome del database e il tipo',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione'
},
{
xtype: 'displayfield',
value: 'Seleziona \'next\' per procedere'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome della connessione database',
anchor: '100%',
allowBlank: false,
enableKeyEvents: true,
ref: '../nomeconndb',
id: 'nomeconndb'
},
{
xtype: 'combo',
fieldLabel: 'Tipo di database a cui connettersi',
anchor: '100%',
store: 'storeDB',
displayField: 'nomeDB',
valueField: 'nomeDB',
mode: 'local',
triggerAction: 'all',
forceSelection: true,
value: 'IBM DB2',
allowBlank: false,
ref: '../typedb',
id: 'typedb'
},
{
xtype: 'combo',
fieldLabel: 'Tipo di accesso al database da usare',
anchor: '100%',
store: 'accessDB',
triggerAction: 'all',
mode: 'local',
valueField: 'tipoaccesso',
displayField: 'tipoaccesso',
forceSelection: true,
allowBlank: false,
value: 'Native (JDBC)',
ref: '../typeconn',
id: 'typeconn'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-2',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Impostare i parametri JDBC',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione1'
},
{
xtype: 'displayfield',
value: ' Inserire il nome host del server database, la porta ed il nome del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome host del server database',
anchor: '100%',
ref: '../hostdb',
id: 'hostdb'
},
{
xtype: 'numberfield',
fieldLabel: 'La porta TCP/IP',
anchor: '100%',
value: 50000,
ref: '../portatcpip',
id: 'portatcpip'
},
{
xtype: 'textfield',
fieldLabel: 'Il nome del database',
anchor: '100%',
ref: '../nomedb',
id: 'nomedb'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-3',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare la sorgente dati ODBC DSN',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione2'
},
{
xtype: 'displayfield',
value: ' Inserire il nome della sorgente dati ODBC DSN'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome della sorgente dati ODBC DSN',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-4',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Impostare i parametri JDBC',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione3'
},
{
xtype: 'displayfield',
value: ' Inserire il nome host del server database, la porta ed il nome del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome host del server database',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'La porta TCP/IP',
anchor: '100%',
value: -1
},
{
xtype: 'textfield',
fieldLabel: 'Il nome del database',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-5',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare il database TNS Oracle',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione4'
},
{
xtype: 'displayfield',
value: ' Inserire il nome del database Oracle TNSNAMES'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Nome del database TNS Oracle',
anchor: '100%'
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-6',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Specificare i parametri Oracle',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione5'
},
{
xtype: 'displayfield',
value: 'Seleziona "next" per procedere'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Tablespace dei dati',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Tablespace indice',
anchor: '100%'
},
{
xtype: 'combo',
fieldLabel: 'Versione',
anchor: '100%',
store: 'versionewiz',
displayField: 'versione',
mode: 'local',
triggerAction: 'all',
typeAhead: true,
valueField: 'versione',
value: '8i',
forceSelection: true
}
]
},
{
xtype: 'form',
bodyStyle: 'padding: 10px',
id: 'card-7',
items: [
{
xtype: 'container',
width: 524,
height: 71,
items: [
{
xtype: 'displayfield',
value: 'Imposta utente e password',
style: 'font-weight: bold;',
htmlEncode: true,
readOnly: true,
id: 'intestazione6'
},
{
xtype: 'displayfield',
value: 'Seleziona "Finisci" per creare una connessione del database'
}
]
},
{
xtype: 'textfield',
fieldLabel: 'Utente',
anchor: '100%'
},
{
xtype: 'textfield',
fieldLabel: 'Password',
anchor: '100%'
},
{
xtype: 'button',
text: 'Prova la connessione al database'
}
]
}
];
nuovaconndbUi.superclass.initComponent.call(this);
}
});




This is my implementation file:





nuovaconndb = Ext.extend(nuovaconndbUi, {
initComponent: function() {
nuovaconndb.superclass.initComponent.call(this);
this.btnNext.on('click', this.onConfirmBtnNext, this);
this.btnBack.on('click', this.onConfirmBtnBack, this);
this.btnCancel.on('click', this.onConfirmBtnCancel, this);
this.nomeconndb.on('keyup', this.pressione, this);
this.hostdb.on('keypress', this.pressione1, this);
this.portatcpip.on('keyup', this.pressione1, this);
this.nomedb.on('keyup', this.pressione1, this);
}

,pressione: function(){
var val=this.nomeconndb.getValue();
if(val)
this.btnNext.setDisabled(false);
else
this.btnNext.setDisabled(true);
}

,pressione1: function(){
alert('rrrr');
var val1=this.hostdb.getValue();
var val2=this.portatcpip.getValue();
var val3=this.nomedb.getValue();
if(val1 && val2 && val3)
this.btnNext.setDisabled(false);
else
this.btnNext.setDisabled(true);
}

,onConfirmBtnNext: function(){
var l = Ext.getCmp('nuovaconndb').getLayout();
var i = l.activeItem.id.split('card-')[1];
switch(i){
case '1':
var scelta=this.typeconn.getValue();
switch(scelta){
case 'Native (JDBC)':
l.setActiveItem(1);
break;
case 'ODBC':
l.setActiveItem(2);
break;
case 'OCI':
l.setActiveItem(4);
break;
case 'JNDI':
l.setActiveItem(3);

this.hostdb.setValue('123');
alert(this.hostdb.getValue());

this.portatcpip.setValue('123');
alert(this.portatcpip.getValue());

this.portatcpip.validate();
this.portatcpip.update();


break;
}
this.btnNext.setDisabled(true);
this.btnBack.setDisabled(false);
break;
case '2':
l.setActiveItem(6);
this.btnNext.setDisabled(false);
break;
case '3':
break;
case '4':
break;
case '5':
break;
case '6':
break;
case '7':
break;

}
}

,onConfirmBtnCancel: function() {
this.close();
}
});

DJ JJ
20 Jan 2011, 1:56 AM
Yeah I'm using xtypes; they are automatically generated by the Designer