PDA

View Full Version : Combobox: How to get the form?



Ooypunk
15 Feb 2011, 2:20 PM
Hello all,

The problem is this: a combobox, filled with the names of customers, is placed in a FormPanel. On change of the combobox, the form is loaded with data (with form.load()). But to be able to do that, first the form-object needs to be found. This is what I have now:

change: function(formField){
var form = formField.ownerCt.getForm();
form.load({
url: 'php/ajax/get_bedrijven_info.php',
params: { id: this.value },
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}

It almost seems like the form isn't the parent (owner) of the combobox. But then what is? Help, please!

raj_plays
15 Feb 2011, 10:25 PM
formField.findParentByType('form');

Ooypunk
16 Feb 2011, 8:20 AM
formField.findParentByType('form');
When I try this, the value of var form changes from undefined to null, which in turn gives an error message on the next line (form.load()).

Ooypunk
19 Feb 2011, 5:50 AM
Anyone?

Condor
19 Feb 2011, 7:30 AM
So now you are using:

var form = formField.findParentByType('form').getForm();
?

Ooypunk
19 Feb 2011, 7:36 AM
No, only this:
var form = formField.findParentByType('form');

Condor
19 Feb 2011, 8:29 AM
That only gets you the FormPanel, you still need to add getForm() to get the inner BasicForm.

Ooypunk
19 Feb 2011, 9:29 AM
That only gets you the FormPanel, you still need to add getForm() to get the inner BasicForm.That would be true if findParentByType did find the form. But, in my case, it doesn't: var form gets the value null.

Would it be of use if I posted the code of the declaration of the form, maybe?

Condor
20 Feb 2011, 5:24 AM
If "formField.findParentByType('form')" returns null, then the field isn't owned by a formpanel.

You'll have to post your layout code...

Ooypunk
20 Feb 2011, 5:30 AM
OK, here goes.

This is the code for the ComboBox itself:

/*
* Combo_Bedrijfsnaam: extend van Ext.form.ComboBox
* helper-functie voor het invoegen van de combobox in Form_Order
*/
var combo_bedrijfsnaam = new Ext.form.ComboBox({
store : new Ext.data.ArrayStore({
// autoDestroy: true,
autoLoad: true,
idIndex: 0,
fields: [
{name: 'id', type: 'integer'},
{name: 'bedrijfsnaam', type: 'string'}
],
url: 'php/ajax/get_bedrijven.php'
}),
typeAhead : true,
typeAheadDelay : 0,
queryDelay : 0,
minChars : 0,
triggerAction : 'all',
emptyText : 'Kies een klant...',
selectOnFocus : true,
fieldLabel : 'Bedrijfsnaam',
valueField : 'id',
displayField : 'bedrijfsnaam',
hiddenName : 'id_bedrijf',
allowBlank : false,
forceSelection : true,
id : 'combo_bedrijfsnaam',
listeners : {
// scope: this,
change: function(formField){
// var form = formField.ownerCt.getForm();
var form = formField.findParentByType('form');
form = form.getForm();
var bla;
form.load({
url: 'php/ajax/get_bedrijven_info.php',
params: { id: this.value },
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}
}
});


And the form wherein it is used (in first column, first line in the items):

/*
* Form_Order: extension van FormPanel
* algemene extension, voor zowel Order_Toevoegen als Order_Wijzigen
*/
Form_Order = Ext.extend(Ext.FormPanel, {
constructor: function(config){
config = Ext.apply({
labelAlign: 'left',
labelWidth: 75,
frame: true,
bodyStyle:'padding:5px 5px 0',
width: 800,
monitorValid: true,
defaults: { msgTarget: 'side'},
items: [ // begin formulier-items
{ // eerste rij
layout:'column',
items: [{ // begin items eerste rij
columnWidth:.4,
layout: 'form',
items: [ // begin items eerste rij, eerste kolom
combo_bedrijfsnaam,
{ xtype:'textfield', fieldLabel : 'Adres', name : 'adres', readOnly: true, width: 200 },
{
xtype: 'compositefield',
fieldLabel: 'Huisnummer',
msgTarget : 'side',
anchor : '-20',
defaults: {
flex: 1
},
items: [
{
xtype:'numberfield',
name : 'huisnummer',
readOnly: true,
width: 50
},{
xtype:'textfield',
name : 'huisnummer_toevoeging',
readOnly: true,
width: 50
}
]
},
{ xtype:'textfield', fieldLabel : 'Postcode', name : 'postcode', readOnly: true, width: 200 },
{ xtype:'textfield', fieldLabel : 'Woonplaats', name : 'woonplaats', readOnly: true, width: 200 },
{ xtype:'textfield', fieldLabel : 'Land', name : 'land', readOnly: true, width: 200 }
] // einde items eerste rij, eerste kolom
},{
columnWidth:.6,
layout: 'form',
labelAlign: 'top',
items: [ // begin items eerste rij, tweede kolom
{
xtype:'textarea',
fieldLabel: 'Opmerkingen',
name: 'opmerking',
anchor:'95%',
value: 'Algemene opmerkingen met betrekking tot orders van deze klant, zoals pallets niet hoger dan 1 meter beladen.',
readOnly: true
},
{ // begin datums-blokje
layout:'column',
items: [
{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype:'datefield',
format: 'd-m-Y',
fieldLabel : 'Datum bestelling',
name : 'datum_bestelling',
// id : 'datum_bestelling',
allowBlank: false,
value: GetToday()
}]
},{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype:'datefield',
format: 'd-m-Y',
fieldLabel : 'Datum levering',
name : 'datum_levering',
// id : 'datum_levering',
allowBlank: false,
value: GetToday_3()
}]
}
]
}, // einde datums-blokje
combo_orderstatus
] // einde items eerste rij, tweede kolom
}] // einde items eerste rij
}
,orderdetailsGrid
] // einde formulier-items
}, config);

Form_Order.superclass.constructor.call(this, config);
} // end of class constructor
}); // eo Form_Order (FormPanel extend)

Hope this helps; if you need more, please say so. Thanks for the help.

Condor
20 Feb 2011, 11:45 PM
Weird setup. You only have one combobox instance, but you use it in a class definition, as if you were planning to create more than one Form_Order instance (which you can't).

Either create the combobox in the Form_Order constructor, so you can create multiple instances, or change Form_Order to be a plain FormPanel instance instead of a class.

ps. Are you setting a combobox value before you create the form? In that case you would get a change event without an ownerCt.

Ooypunk
21 Feb 2011, 10:15 AM
There was a reason once for defining the combobox this way. I only fail to remember why, now. :s

Anyway, this is how I define the FormPanel now:

/*
* Form_Order: extension van FormPanel
* algemene extension, voor zowel Order_Toevoegen als Order_Wijzigen
*/
Form_Order = Ext.extend(Ext.FormPanel, {
constructor: function(config){
config = Ext.apply({
labelAlign: 'left',
labelWidth: 75,
frame: true,
bodyStyle:'padding:5px 5px 0',
width: 800,
monitorValid: true,
defaults: { msgTarget: 'side'},
items: [ // begin formulier-items
{ // eerste rij
layout:'column',
items: [{ // begin items eerste rij

columnWidth:.4,
layout: 'form',
items: [ // begin items eerste rij, eerste kolom
{ xtype:'textfield', fieldLabel : 'id', name : 'id', hidden: true },
new Ext.form.ComboBox({
store : new Ext.data.ArrayStore({
// autoDestroy: true,
autoLoad: true,
idIndex: 0,
fields: [
{name: 'id', type: 'integer'},
{name: 'bedrijfsnaam', type: 'string'}
],
url: 'php/ajax/get_bedrijven.php'
}),
typeAhead : true,
typeAheadDelay : 0,
queryDelay : 0,
minChars : 0,
triggerAction : 'all',
emptyText : 'Kies een klant...',
selectOnFocus : true,
fieldLabel : 'Bedrijfsnaam',
valueField : 'id',
displayField : 'bedrijfsnaam',
hiddenName : 'id_bedrijf',
allowBlank : false,
forceSelection : true,
id : 'combo_bedrijfsnaam',
listeners : {
// scope: this,
change: function(formField){
// var form = formField.ownerCt.getForm();
var form = formField.findParentByType('form');
form = form.getForm();
var bla;
form.load({
url: 'php/ajax/get_bedrijven_info.php',
params: { id: this.value },
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}
}
}),
{ xtype:'textfield', fieldLabel : 'Adres', name : 'adres', readOnly: true, width: 200 },
{
xtype: 'compositefield',
fieldLabel: 'Huisnummer',
msgTarget : 'side',
anchor : '-20',
defaults: {
flex: 1
},
items: [
{
xtype:'numberfield',
name : 'huisnummer',
readOnly: true,
width: 50
},{
xtype:'textfield',
name : 'huisnummer_toevoeging',
readOnly: true,
width: 50
}
]
},
{ xtype:'textfield', fieldLabel : 'Postcode', name : 'postcode', readOnly: true, width: 200 },
{ xtype:'textfield', fieldLabel : 'Woonplaats', name : 'woonplaats', readOnly: true, width: 200 },
{ xtype:'textfield', fieldLabel : 'Land', name : 'land', readOnly: true, width: 200 }
] // einde items eerste rij, eerste kolom
},{
columnWidth:.6,
layout: 'form',
labelAlign: 'top',
items: [ // begin items eerste rij, tweede kolom
{
xtype:'textarea',
fieldLabel: 'Opmerkingen',
name: 'opmerking',
anchor:'95%',
value: 'Algemene opmerkingen met betrekking tot orders van deze klant, zoals pallets niet hoger dan 1 meter beladen.',
readOnly: true
},
{ // begin datums-blokje
layout:'column',
items: [
{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype:'datefield',
format: 'd-m-Y',
fieldLabel : 'Datum bestelling',
name : 'datum_bestelling',
// id : 'datum_bestelling',
allowBlank: false,
value: GetToday()
}]
},{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype:'datefield',
format: 'd-m-Y',
fieldLabel : 'Datum levering',
name : 'datum_levering',
// id : 'datum_levering',
allowBlank: false,
value: GetToday_3()
}]
}
]
}, // einde datums-blokje
combo_orderstatus
] // einde items eerste rij, tweede kolom
}] // einde items eerste rij
}
,orderdetailsGrid
] // einde formulier-items
}, config);

Form_Order.superclass.constructor.call(this, config);
} // end of class constructor
}); // eo Form_Order (FormPanel extend)

I define it this way, so I can extend it again: one into Form_Order_Toevoegen and one into Form_Order_Wijzigen.

Ooypunk
21 Feb 2011, 10:17 AM
ps. Are you setting a combobox value before you create the form? In that case you would get a change event without an ownerCt.
No. In one instance (Form_Order_Toevoegen) no value is given, in the other (Form_Order_Wijzigen) values are loaded into the form with .load().

Ooypunk
22 Feb 2011, 12:45 PM
OK, got it working now. Not pretty, but working.


Form_Order = Ext.extend(Ext.FormPanel, {
constructor: function(config){
config = Ext.apply({
labelAlign: 'left',
labelWidth: 75,
frame: true,
bodyStyle:'padding:5px 5px 0',
width: 800,
monitorValid: true,
defaults: { msgTarget: 'side'},
items: [ // begin formulier-items
{ // eerste rij
layout:'column',
items: [{ // begin items eerste rij

columnWidth:.4,
layout: 'form',
items: [ // begin items eerste rij, eerste kolom
{ xtype:'textfield', fieldLabel : 'id', name : 'id', hidden: true },
new Ext.form.ComboBox({
store : new Ext.data.ArrayStore({
// autoDestroy: true,
autoLoad: true,
idIndex: 0,
fields: [
{name: 'id', type: 'integer'},
{name: 'bedrijfsnaam', type: 'string'}
],
url: 'php/ajax/get_bedrijven.php'
}),
typeAhead : true,
typeAheadDelay : 0,
queryDelay : 0,
minChars : 0,
triggerAction : 'all',
emptyText : 'Kies een klant...',
selectOnFocus : true,
fieldLabel : 'Bedrijfsnaam',
valueField : 'id',
displayField : 'bedrijfsnaam',
hiddenName : 'id_bedrijf',
allowBlank : false,
forceSelection : true,
// id : 'combo_bedrijfsnaam',
listeners : {
scope: this,
change: function(){
var form = this.getForm();
var thisCombo = form.findField('id_bedrijf');
form.load({
url: 'php/ajax/get_bedrijven_info.php',
params: { id: thisCombo.value },
failure: function(form, action) {
Ext.Msg.alert("Load failed", action.result.errorMessage);
}
});
}
}
}),
{ ...other items... },
}
,orderdetailsGrid
] // einde formulier-items
}, config);

Form_Order.superclass.constructor.call(this, config);
} // end of class constructor
}); // eo Form_Order (FormPanel extend)


Thanks, Condor, for all the help!

Condor
22 Feb 2011, 11:30 PM
For the combobox you could consider using the 'ref' config option, so you don't need to use the (slower) findField.

Ooypunk
23 Feb 2011, 1:09 PM
For the combobox you could consider using the 'ref' config option, so you don't need to use the (slower) findField.
Though I don't notice a speed difference, I do notice that the code becomes a lot more elegant. Thanks!