PDA

View Full Version : getForm on panel not working, why?



Fire-Dragon-DoL
18 Jan 2012, 6:11 AM
I created something like this: http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/form/form-grid.html
but I can't really use your method to update my form. Infact when I get the panel (and I'm sure is the panel, I checked with console.log and printed also it's title) it says that function doesn't exist.

Can you explain me why and how can I solve this? Maybe I'm missing a property or something like this

friend
18 Jan 2012, 6:36 AM
I'm betting that you're not actually getting a reference to the desired instance of your Ext.form.Panel.

Can you post a concise code sample of your form's layout and the code block which tries to manipulate the form?

Fire-Dragon-DoL
18 Jan 2012, 7:23 AM
Here you can find my window code which contains the panel:

Ext.define('FedertrekDesktop.view.association.Window', {
extend: 'FedertrekDesktop.view.desktopwindow.BaseDesktopWindow',
alias : 'widget.associationwindow',

width: 800,
height: 600,
layout: {
type: 'border'
},
defaults: {
split: true
},
items: [{
xtype: 'toolbar',
region: 'north',
items: [{
xtype: 'button',
text: 'Aggiungi'
}]
},{
xtype: 'gridpanel',
region: 'center',
title: 'Associazioni',
padding: 1,
columns: [
{
header: 'Nome',
dataIndex: 'name'
},
{
header: 'E-Mail',
dataIndex: 'email'
},
{
header: 'Telefono',
dataIndex: 'phone'
},
{
header: 'Note',
dataIndex: 'note'
}
],
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
var myForm = Ext.ComponentQuery.query('associationwindow gridpanel')[0].nextSibling();
console.log(myForm);
myForm.getForm().loadRecord(records[0]);
}
}
},
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'name'},
{name: 'email'},
{name: 'phone'},
{name: 'note'}
],
data: [
['Federtrek', 'email@boh.it', '234290234', 'test'],
['Prova 1', 'fewr@vreger.com', '43923901', ''],
['Noname', 'fiewr@vioe.ciew', '243829', '']
]
})
},{
xtype: 'panel',
region: 'east',
collapsible: true,
frame: false,
layout: 'fit',
padding: 1,
minWidth: 250,
bodyStyle: 'background: transparent;',
items: [{
xtype: 'fieldset',
title: 'Dettagli associazione',
style: 'margin: 0 4%; margin-bottom: 4%; width: 96%;',
defaults: {
width: 240,
labelWidth: 90
},
items: [{
xtype: 'textfield',
fieldLabel: 'Nome'
},{
xtype: 'textfield',
fieldLabel: 'E-Mail'
},{
xtype: 'textfield',
fieldLabel: 'Telefono'
},{
xtype: 'textfield',
fieldLabel: 'Note'
}]
}]
}]
});

And here you can see the result: I get the correct panel, but getForm doesn't work.
Can it be connected with the fact that the fields are not direct children of the panel, but are children of the fieldContainer?

NOTICE: I tested to understand if I'm getting the correct panel giving it a name (you can't see it in code, I added it locally). The object logged in the console contains exactly that title so the panel I'm fetching with query is correct.

Link to zoomed image (the attachment is really small):
http://dl.dropbox.com/u/762638/Files/Images/NotWorking/myFormDontWork.png

http://dl.dropbox.com/u/762638/Files/Images/NotWorking/myFormDontWork.png
(http://dl.dropbox.com/u/762638/Files/Images/NotWorking/myFormDontWork.png)

friend
18 Jan 2012, 10:19 AM
It looks like you've mistaken a FieldSet for an Ext.form.Panel. I don't see a Form Panel (xtype: 'form') anywhere in your code sample.

Raja Murugesan
18 Jan 2012, 10:57 AM
I altered your code,

1) converted panel -> form.
2) given name to all your form fields.












Ext.define('FedertrekDesktop.view.association.Window', {
extend: 'FedertrekDesktop.view.desktopwindow.BaseDesktopWindow',
alias : 'widget.associationwindow',

width: 800,
height: 600,
layout: {
type: 'border'
},
defaults: {
split: true
},
items: [{
xtype: 'toolbar',
region: 'north',
items: [{
xtype: 'button',
text: 'Aggiungi'
}]
},{
xtype: 'gridpanel',
region: 'center',
title: 'Associazioni',
padding: 1,
columns: [
{
header: 'Nome',
dataIndex: 'name'
},
{
header: 'E-Mail',
dataIndex: 'email'
},
{
header: 'Telefono',
dataIndex: 'phone'
},
{
header: 'Note',
dataIndex: 'note'
}
],
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
var myForm = Ext.ComponentQuery.query('associationwindow gridpanel')[0].nextSibling();
console.log(myForm);
myForm.getForm().loadRecord(records[0]);
}
}
},
store: Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'name'},
{name: 'email'},
{name: 'phone'},
{name: 'note'}
],
data: [
['Federtrek', 'email@boh.it', '234290234', 'test'],
['Prova 1', 'fewr@vreger.com', '43923901', ''],
['Noname', 'fiewr@vioe.ciew', '243829', '']
]
})
},{
xtype: 'form',
region: 'east',
collapsible: true,
frame: false,
layout: 'fit',
padding: 1,
minWidth: 250,
bodyStyle: 'background: transparent;',
items: [{
xtype: 'fieldset',
title: 'Dettagli associazione',
style: 'margin: 0 4%; margin-bottom: 4%; width: 96%;',
defaults: {
width: 240,
labelWidth: 90
},
items: [{
xtype: 'textfield',
fieldLabel: 'Nome',
name:'name'
},{
xtype: 'textfield',
fieldLabel: 'E-Mail',
name:'email'
},{
xtype: 'textfield',
fieldLabel: 'Telefono',
name:'phone'
},{
xtype: 'textfield',
fieldLabel: 'Note',
name:'note'
}]
}]
}]
});





hope this helps.....:)

Fire-Dragon-DoL
18 Jan 2012, 2:44 PM
It looks like you've mistaken a FieldSet for an Ext.form.Panel. I don't see a Form Panel (xtype: 'form') anywhere in your code sample.




},{ xtype: 'panel', region: 'east', collapsible: true, frame: false, layout: 'fit', padding: 1, minWidth: 250, bodyStyle: 'background: transparent;', items: [{ xtype: 'fieldset',

You are missing it but there is, xtype panel... that part of the code. The fieldset is inside.
You can see in the image that I'm getting the correct panel.

I'll test with names as Raja suggested and I'll see what happens. I don't think that this is the problem by the way.

skirtle
18 Jan 2012, 8:13 PM
Ext.panel.Panel has an xtype of panel.

Ext.form.Panel has an xtype of form.

The method getForm is on Ext.form.Panel, not Ext.panel.Panel.

You are using panel. What you want is form.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel

hendricd
18 Jan 2012, 8:49 PM
@Fire-dragon --

Two problems with this thread:

1) The only xtype in the entire system which supports the BasicForm interface (loadRecord) is xtype : 'form'. A Fieldset is just a container with field layout support.

Change your fieldset's parent to xtype: 'form' and use a simpler Component selector in your selection handler:



listeners : {
scope : me, //See Problem #2 to solve the scope problem

selectionchange: function(model, records) {
if (records[0]) {
var myForm = this.up('associationwindow').child( 'form');
console.log(myForm);
if(myForm) myForm.getForm().loadRecord(records[0]);
}
}
}


2) NEVER declare complex objects (such as items) in the prototype chain of your class. Doing so would ensure that an instance of this class would only render successfully ONCE.

Declare items, tbars, etc in either the constructor or initComponent template methods (where listener scope is easier to control, see Problem 1 above).


initComponent : function() {
var me = this;
Ext.apply(this, {
items : [....],
tbar : []
});
this.callParent();
}


If you will only need to use this class once, there is no need to use Ext.define at all, just create this instance 'inline' using Ext.create (as was the case where you copied this from).

Fire-Dragon-DoL
19 Jan 2012, 7:32 AM
@Fire-dragon --

Two problems with this thread:

1) The only xtype in the entire system which supports the BasicForm interface (loadRecord) is xtype : 'form'. A Fieldset is just a container with field layout support.

Change your fieldset's parent to xtype: 'form' and use a simpler Component selector in your selection handler:



listeners : {
scope : me, //See Problem #2 to solve the scope problem

selectionchange: function(model, records) {
if (records[0]) {
var myForm = this.up('associationwindow').child( 'form');
console.log(myForm);
if(myForm) myForm.getForm().loadRecord(records[0]);
}
}
}


2) NEVER declare complex objects (such as items) in the prototype chain of your class. Doing so would ensure that an instance of this class would only render successfully ONCE.

Declare items, tbars, etc in either the constructor or initComponent template methods (where listener scope is easier to control, see Problem 1 above).


initComponent : function() {
var me = this;
Ext.apply(this, {
items : [....],
tbar : []
});
this.callParent();
}


If you will only need to use this class once, there is no need to use Ext.define at all, just create this instance 'inline' using Ext.create (as was the case where you copied this from).

Thanks for your suggestion, however I'm testing it and I'm having troubles that I can't detect (the error isn't very helpful):

Ext.define('FedertrekDesktop.view.association.Window', {
extend: 'FedertrekDesktop.view.desktopwindow.BaseDesktopWindow',
alias : 'widget.associationwindow',

width: 800,
height: 600,
layout: {
type: 'border'
},
defaults: {
split: true
},
items: [{
xtype: 'toolbar',
region: 'north',
items: [{
xtype: 'button',
text: 'Aggiungi'
}]
},{
xtype: 'gridpanel',
region: 'center',
title: 'Associazioni',
padding: 1,
columns: [
{
header: 'Nome',
dataIndex: 'name'
},
{
header: 'E-Mail',
dataIndex: 'email'
},
{
header: 'Telefono',
dataIndex: 'phone'
},
{
header: 'Note',
dataIndex: 'note'
}
],

initComponent: function() {
var me = this;
Ext.apply(me, {
listeners: {
scope: this,

selectionchange: function(model, records) {
if (records[0]) {
var myForm = this.up('associationwindow').child('form');
console.log(myForm);
console.log(records[0]);
myForm.getForm().loadRecord(records[0]);
}
}
}
});
me.callParent();
},

store: Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'name'},
{name: 'email'},
{name: 'phone'},
{name: 'note'}
],
data: [
['Federtrek', 'email@boh.it', '234290234', 'test'],
['Prova 1', 'fewr@vreger.com', '43923901', ''],
['Noname', 'fiewr@vioe.ciew', '243829', '']
]
})
},{
xtype: 'form',
region: 'east',
collapsible: true,
frame: false,
layout: 'fit',
padding: 1,
minWidth: 250,
bodyStyle: 'background: transparent;',
items: [{
xtype: 'fieldset',
title: 'Dettagli associazione',
style: 'margin: 0 4%; margin-bottom: 4%; width: 96%;',
defaults: {
width: 240,
labelWidth: 90
},
items: [{
xtype: 'textfield',
fieldLabel: 'Nome'
},{
xtype: 'textfield',
fieldLabel: 'E-Mail'
},{
xtype: 'textfield',
fieldLabel: 'Telefono'
},{
xtype: 'textfield',
fieldLabel: 'Note'
}]
}]
}]
});

NOTICE: I didn't move everythng to Ext.apply because I were testing at the moment, however in my situation the instance of this class can be destroyed and recreated, but there will not be 2 instances of this class at the same time. However your suggestion is important, thanks a lot.

ERROR:
me.dockedItems is undefined



me.dockedItems.insert(pos + i, item);





LINE 331333 of ext-all-debug


Ext.panel.Panel has an xtype of panel.

Ext.form.Panel has an xtype of form.

The method getForm is on Ext.form.Panel, not Ext.panel.Panel.

You are using panel. What you want is form.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.form.Panel)

I didn't notice it really, I thought that form was an alias form panel. GetForm is working this time, thanks for that suggestion, however now loadRecord is not: I don't get any error, but form doesn't get updated.
Here is the code (which is not the same I posted in the other quote, it's like the first one I posted):

listeners: {
selectionchange: function(model, records) {
if (records[0]) {
var myForm = this.up('associationwindow').child('form');
console.log(myForm);
console.log(records[0]);
myForm.getForm().loadRecord(records[0]);
}
}
},

In console I get:

Object { initialConfig={...}, xtype="form", region="east", altri elementi...}
Object { phantom=true, internalId="ext-record-5", raw=[4], altri elementi...}


data
: Object { name="Prova 1", email="fewr@vreger.com", phone="43923901"}



email
"fewr@vreger.com"



name
"Prova 1"



note
""



phone
"43923901"





raw: ["Prova 1", "fewr@vreger.com", "43923901", ""]

Data and raw are ok, so it looks like I'm getting the correct entry. However, loadrecord doesn't work. Care that it doesn't throw any error so probably I'm missing something like how to bind each record to each field (I don't know).

Thanks for any help

EDIT 1 As for the second problem, I solved it sorry, I forgot to put name on each field as you suggested. Now it's working fine!

I'm sorry with Raja, it was my fault that I didn't understand what you were saying (I really didn't notice that panel and form where 2 different types of panel). Seems like your answer was the correct one.