PDA

View Full Version : empty Combobox in Tabpanel



Stephan123
15 Sep 2009, 5:29 AM
Hello !

I have an tabpanel. In section 3 of the tabpanel i add an form.
See image. In this form is a combobox. When i test the form solo the combo works fine.
When i add the form in the tabpanel the combo is empty.

How can help ?

Your sincerly

Stephan

15 Sep 2009, 5:43 AM
Inspect your code and step through it. Is the store loading?

Stephan123
15 Sep 2009, 5:51 AM
I have checked the store. The store is load.
I have test with the firebug in FF.



var test = Ext.getCmp('testform').items.items[0].store.data;
console.dir(test);


I can see the value of the store.
See Image.

Your sincerly

Stephan

15 Sep 2009, 6:17 AM
how about posting the code for your combo :)

Stephan123
15 Sep 2009, 6:24 AM
Hello !

Hier the code.
In my app the code is in a function.



var xyz456 = [
['aaaaa','aaaaa'],
['bbbbb','bbbbb'],
['ccccc','ccccc'],
['ddddd','ddddd']
];

var Daten = new Ext.data.ArrayStore({
data : xyz456,
// storeId: 'StoreSchaltung',
fields : ['abc123','inhalt']
});

var formschaltung = new Ext.form.FormPanel({
title: 'Test',
id: 'testform',
// renderTo: document.body,
items: [{
xtype: 'combo',
store: Daten,
displayField : 'abc123',
mode: 'local',
fieldLabel : "Gruppe",
name: 'GBG'
}]
});

Ext.getCmp('abschnitt3').add(formschaltung);


Your sincerly

Stephan

15 Sep 2009, 6:37 AM
is abschnitt3 rendered?

15 Sep 2009, 6:38 AM
Btw, you're missing valueField from your combo and hiddenName

Stephan123
15 Sep 2009, 6:50 AM
Here the new code for the combobox.


var xyz456 = [
['aaaaa','aaaaa'],
['bbbbb','bbbbb'],
['ccccc','ccccc'],
['ddddd','ddddd']
];

var Daten = new Ext.data.ArrayStore({
data : xyz456,
// storeId: 'StoreSchaltung',
fields : ['abc123','inhalt']
});

var formschaltung = new Ext.form.FormPanel({
title: 'Test',
id: 'testform',
// renderTo: document.body,
items: [{
xtype: 'combo',
store: Daten,
displayField : 'abc123',
mode: 'local',
fieldLabel : "Gruppe",
valueField: 'inhalt',
hiddenName: 'hidden',
name: 'GBG'
}]
});

Ext.getCmp('abschnitt3').add(formschaltung);The section 'abschnitt3' is render in the first step.
Here the code.


fenster = new Ext.Window({
title: 'Loginverwaltung',
x: 50,
y: 90,
width: 850,
autoHeight: true,
draggable: false,
id: 'fenster',
shadow: false,
resizable: false,
tbar: {
height: 30,
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'neu',
cls: 'x-btn-text-icon',
icon: '/lib/famfamfam/application_get.png',
tooltip: 'legt neuen Benutzer an [Alt + 1]',
handler: function(){
self.neu();
}
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'bearbeiten',
cls: 'x-btn-text-icon',
icon: '/lib/famfamfam/book_edit.png',
tooltip: 'bearbeiten eines vorhandenen Nutzers [Alt + 2]',
handler: function(){
self.bearbeiten();
}
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'speichern',
cls: 'x-btn-text-icon',
icon: '/lib/famfamfam/disk.png',
tooltip: 'speichern eines Nutzers [Alt + 3]',
handler: function(){
self.speichern();
}
},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'abbrechen',
cls: 'x-btn-text-icon',
icon: '/lib/famfamfam/cross.png',
tooltip: 'abbrechen der Bearbeitung [Alt + 4]',
handler: function(){
self.abbruch();
}

},{
xtype: 'tbseparator'
},{
xtype: 'button',
text: 'Hilfe',
cls: 'x-btn-text-icon',
icon: '/lib/famfamfam/lightbulb.png',
information: 'Loginverwaltung',
tooltip: 'Hilfe zur Loginverwaltung',
handler: HilfeDatenbank
}]
},
bbar: {
height: 30,
xtype: 'toolbar'
},
items: [{
xtype: 'tabpanel',
deferredRender: true,
id: 'tabpanel',
autoHeight: true,
border: true,
activeTab: 0,
// LayoutOnTabChange: true,
items: [{
title: 'vorhandene Benutzer',
id: 'abschnitt1',
html: ' '
},{
title: 'Personendaten',
id: 'abschnitt2',
html: ' '
},{
title: 'Schaltung',
id: 'abschnitt3',
html: ' '
}]
}]
});

fenster.show();



The combobox is empty !


Your sincerly

Stephan

15 Sep 2009, 6:54 AM
Sorry i misssed this before:

add :

autoLoad: true the data store.

Stephan123
15 Sep 2009, 7:28 AM
Hello !

I have insert zhe option
autoload: true

It doesn't work.

When i insert the combobox in the method of a class it doesn't work.



this.test3abschnitt = function(){

console.warn("loginverwaltung::test3abschnitt");

var xyz456 = [
['aaaaa','aaaaa'],
['bbbbb','bbbbb'],
['ccccc','ccccc'],
['ddddd','ddddd']
];

var Daten = new Ext.data.ArrayStore({
data : xyz456,
// storeId: 'StoreSchaltung',
fields : ['abc123','inhalt'],
autoLoad: true
});

var formschaltung = new Ext.form.FormPanel({
// renderTo: document.body,
title: 'Test',
id: 'testform',
renderTo: document.body,
items: [{
xtype: 'combo',
store: Daten,
displayField : 'abc123',
mode: 'local',
fieldLabel : "Gruppe",
valueField: 'inhalt',
hiddenName: 'hidden',
name: 'GBG'
}]
});

// Ext.getCmp('abschnitt3').add(formschaltung);

return;
}

objekt = new loginverwaltung();
objekt.test3abschnitt();



When i insert the combobox in a 'normal' function it works.


function test3abschnitt(){

console.warn("loginverwaltung::test3abschnitt");

var xyz456 = [
['aaaaa','aaaaa'],
['bbbbb','bbbbb'],
['ccccc','ccccc'],
['ddddd','ddddd']
];

var Daten = new Ext.data.ArrayStore({
data : xyz456,
// storeId: 'StoreSchaltung',
fields : ['abc123','inhalt'],
autoLoad: true
});

var formschaltung = new Ext.form.FormPanel({
// renderTo: document.body,
title: 'Test',
id: 'testform',
renderTo: document.body,
items: [{
xtype: 'combo',
store: Daten,
displayField : 'abc123',
mode: 'local',
fieldLabel : "Gruppe",
valueField: 'inhalt',
hiddenName: 'hidden',
name: 'GBG'
}]
});

// Ext.getCmp('abschnitt3').add(formschaltung);

return;
}

test3abschnitt();


:-?:-?:-?:-?:-?

Your sincerly

Stephan

-------------------------------
1 million dollar for a book about extjs in german language

15 Sep 2009, 7:50 AM
Makes no sense.

remove renderTo: document.body, from the FormPanel.

You should never use renderTo when a component is a child of another.

Stephan123
16 Sep 2009, 1:49 AM
Hello !

I have build an example script.



var dummy = function(){

// public
this.test1 = function(){
Ext.Msg.alert('Test 1');
}

// public
this.test2 = function(){
Ext.Msg.alert('Test 2');
}

// private
function test3(){
Ext.Msg.alert('Test 2');
self.test1();
}

self = this;

}

var dum = new dummy();

var werte = [['aaa','aaa'],['bbb','bbb']];

var XYZ123 = new Ext.form.FormPanel({
id: 'dddddddd',
renderTo: document.body,
items: [{
xtype : "combo",
name : "combovalue",
id: 'testcombo',
hiddenName : "combovalue",
fieldLabel : "Combo",
store : werte
}]
}); // Ende Form


When i use this script the combobox doesn't work.
When i delete
self = this
the script works.

:-?

Your sincerly

Stephan

Stephan123
16 Sep 2009, 5:22 AM
Hello !

I have found the error.

the line
self = this;

is the error.
When i take an other name for the variable
it works fine.

Your sincerly

Stephan