EXT JS Problem mit Combobox befüllen aus Json Date

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Hallo Zusammen,

muß mich in Ext Js einarbeiten. Nur einen Punkt bekomme ich nicht.
Hab eine Json Datei auf dem Web Server
Inhalt:

{ rows: [{id: 1, name: "John"}, {id: 2, name: "Anna"}, {id: 3, name: "Mike"}] }

Nur die Combobox wird nicht befüllt.
mein TestCode

Ext.onReady(function(){
 Ext.QuickTips.init();

 var remoteStore = new Ext.data.JsonStore({
 root: 'rows',
 fields: ['id','name'],
 proxy: new Ext.data.ScriptTagProxy({
 url: 'testjson.json'
 })
 });

 var simple = new Ext.form.FormPanel({
 id: 'rows',
 title: 'Simple Form',
 labelWidth: 75,
 width: 350,
 renderTo: Ext.getBody(),

 items: [{
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' 
 } 
 ]
 });
});

Die Datei „testjson.json“ wird auch gefunden.
Ersichtlich im Apache.log

Vielen Dank für jeden Tipp

Danke

Mani

#2

Hallo Mani,

ersetze die Zeilen

proxy: new Ext.data.ScriptTagProxy({
 url: 'testjson.json'
 })

durch

url: 'testjson.json'

trage bei deiner ComboBox zusätzlich

triggerAction : 'all'

und bei dem Store

autoLoad : true

ein, dann sollte alles funktionieren.

Gruß Mike

#3

Hallo,

Vielen dank für die Antwort.

Aber ich glaube ich mach noch was falsch, leider klappt es noch nicht:

Ext.onReady(function(){
 Ext.QuickTips.init();

 var remoteStore = new Ext.data.JsonStore({
 root: 'rows',
 fields: ['id','name'],
 url: 'testjson.json',
 autoLoad : true
 });

 var simple = new Ext.form.FormPanel
 ({
 id: 'test',
 title: 'Simple Form',
 labelWidth: 75,
 width: 350,
 renderTo: Ext.getBody(),
 items: [{
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' ,
 triggerAction : 'all' 
 }]
 })
});

Vielen Dank für die Hilfe

Mani

#4

Hi Mani,

sorry ich hab noch etwas übersehen, du musst für dein Feld id den Typ mit angeben, statt

fields: ['id','name'],

folgendes

fields : [
 {name : 'id', type : 'int'},
 'name'
]

bei Feldern vom Typ text brauchst du keinen Datentypen angeben.

Gruß Mike

#5

Hallo,

nochmal vielen vielen Dank für die Antwort.
Aber ExtJs scheint anderer Meinung zu sein :smile:

Irgendwie ist da noch der Wurm drin :

Ext.onReady(function(){
 Ext.QuickTips.init();

 var remoteStore = new Ext.data.JsonStore({
 url:'testjson.json',
 root: 'rows',
 autoLoad : true,
 fields: [{name:'id', type:'int'},'name']
 });


 var simple = new Ext.form.FormPanel
 ({
 id: 'test',
 title: 'Simple Form',
 labelWidth: 75,
 width: 350,
 renderTo: Ext.getBody(),
 items: [{
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' ,
 triggerAction : 'all' 
 }]
 })
});

Vielen Dank

Mani

#6

SOLVED:EXT JS Problem mit Combobox befüllen Json
DANKE hab es rausbekommen:

Ext.onReady(function(){
 Ext.QuickTips.init();



 var remoteStore = Ext.create('Ext.data.Store', {
 pageSize: 10,
 proxy: {
 type: 'ajax',
 url: '/exttest/testjson.json',
 method:'POST',
 reader: {
 type: 'json',
 root: 'rows'
 }
 },
 fields: [{name:'id', type:'int'},'name'],
 autoload:true
 });


 var simple = new Ext.form.FormPanel
 ({
 id: 'test',
 title: 'Simple Form',
 labelWidth: 105,
 width: 350,
 renderTo: Ext.getBody(),
 items: [{
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' ,
 triggerAction : 'all' 
 }]
 })


});
#7

Hallo Mani,

verstehe ich nicht ganz, es sollte einfacher gehen. Ich habe es eben mal ausprobiert. Hier mein Script

Ext.onReady(function(){
 Ext.QuickTips.init();
 var remoteStore = new Ext.data.JsonStore({
 root: 'rows',
 autoLoad : true,
 fields: [
 {name : 'id', type : 'int'},
 'name'
 ],
 url: 'testjson.json'
 });

 var simple = new Ext.form.FormPanel({
 id: 'simple',
 title: 'Simple Form',
 labelWidth: 75,
 width: 350,
 renderTo: Ext.getBody(),
 items: [{
 triggerAction : 'all',
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' 
 }]
 });

 simple.render('pnl');
});

Damit wird die Combo mit den drei Werten befüllt.

hier die json-Datei die ich verwendet habe.

{rows:[{id: 1, name: 'John'},{id: 2, name: 'Anna'},{id: 3, name: 'Mike'}]}

Es kann aber eventuell an der Version liegen, dass es bei dir nicht funktioniert hat. Ich habe hier gerade nicht die aktuelle Version zur Hand.

Gruß Mike

#8

Hallo,

bin am verzweifeln. Hab Ext JS 4.1 vom 20.04.2012

Bei folgenden Quell Code

Ext.onReady(function(){

 Ext.QuickTips.init();

 var remoteStore = new Ext.data.JsonStore({
 root: 'rows',
 autoLoad : true,
 fields: [
 {name : 'id', type : 'int'},
 'name'
 ],
 url: 'testjson.json'
 });

 var simple = new Ext.form.FormPanel({
 id: 'simple',
 title: 'Simple Form',
 labelWidth: 75,
 width: 350,
 items: [{
 triggerAction : 'all',
 xtype:'combo',
 store: remoteStore, 
 valueField: 'id', 
 displayField: 'name', 
 name: 'answerType',
 mode: 'remote' 
 }]
 });

 simple.render(document.body);

});

Und Json Datei:

{rows: [{id: 1, name: "England"}, {id: 2, name: "Deutschland"}, {id: 3, name: "Italien"}]}

Erscheint die Fehlermeldung:
Url is undefined

Hintergrund der Aktion ist, das ich einen Store benötige
welchen ich auch mit simple.getAt(0) abfragen kann.
Da dies offensichtlich bei Type:AJAX nicht möglich ist

Vielen Dank für jeden Tipp

Mani

#9

Hallo Mani,

laut der Docu vom ExtJs 4.1 musst du vermutlich den Proxy doch angeben wie du es bereits gemacht hast. Ich hab diese Version zur Zeit nicht auf dem Rechner, kann es also nicht testen. Ich habe hier

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store

nachgelesen. Ich hoffe das hilft dir weiter.

Gruß Mike