ExtJS – Beispiel (2)

Im zweiten Beispiel versuche ich erst mal ein Formular mit statischen Daten anzuzeigen. Die Werte werden per VALUE-Attibute gesetzt und sollten später mal aus einer Query kommen. Da spuckt mir aber ColdFusions serializeJSON()-Funktion (ab der ColdFusion-Version 8) in die Suppe, weil es eine andere Stucktur hat. Das cfJSON möchte ich aber nicht verwenden.

In der ersten Datei beispiel_2.html werden die notwendigen ExtJS-Dateien wie gehabt eingebunden und das ExtJS-Element diesmal direkt per render()-Funktion im BODY-Bereich dynamisch erstellt. Deshalb kann der HTML-BODY-Bereich einfach leer bleiben:

Die zweite Datei beispiel_2.js ist dann das Javascript, welches die gewünschten ExtJS-Elemente generiert.

Ext.onReady(function(){
  var beispiel_2 = new Ext.FormPanel({
    labelAlign:'left',
    frame:true,
    title:'Mein zweites Beispiel',
    bodyStyle:'padding:5px 5px 0',
    width:650,
    items:[{
      layout:'column',
      items:[{
      columnWidth:.5,
      layout:'form',
      items: [{
        xtype:'textfield',
        fieldLabel:'Vorname',
        name:'vorname',
        anchor:'95%',
        value: 'Reinhard'
        }, {
        xtype:'textfield',
        fieldLabel:'Homepage',
        allowBlank:true,
        name:'homepage',
        anchor:'95%',
        value: 'https://landstrasse.ch'
        }]
      },{
      columnWidth:.5,
      layout:'form',
        items:[{
          xtype:'textfield',
          fieldLabel:'Nachname',
          name:'nachname',
          anchor:'95%',
          value: 'Jung'
          },{
          xtype:'textfield',
          fieldLabel:'eMail',
          name:'email',
          vtype:'email',
          anchor:'95%',
          value: 'extjs@landstrasse.ch'
        }]
      }]
      },{
      xtype:'htmleditor',
      id:'beschrieb',
      fieldLabel:'Beschrieb',
      height:100,
      anchor:'98%',
      value: 'Na sowas?'
    }],
    buttons:[{text:'sichern'},{text:'abbrechen'}]
  });
  beispiel_2.render(document.body);
});