PDA

View Full Version : How to Fill a Form With Record Data?



Eraser
13 Sep 2011, 11:19 PM
Hello,

I have a panel with a docked toolbar and a form inserted as items.
How can I fill the form with data from a given record via "tpl"?

All works fine when I create a custom template instead of the "items" section. But that's not that fancy as I want my app.

Does anybody know how to use tpl within a form or the "items" section?

Thanks in advance,
Ruben

Eraser
13 Sep 2011, 11:23 PM
Sorry about the bad code above (I deleted it)



Native3.views.detailPanel = new Ext.extend(Ext.Panel, {
title : "detail",

initComponent : function() {
Ext.apply(this, {
defaults : {
styleHtmlContent : true,
},

scroll : 'vertical',

dockedItems : [ {
xtype : 'toolbar',
dock : 'top',
ui : 'light',

items : [{
text : 'Zurück',
ui : 'back',
handler : function() {
Native3.views.Viewport.setActiveItem(
Native3.INDEX_NEW_ITEMS, {
type : 'slide',
direction : 'right'
});
}
}, {
xtype : 'spacer'
}, {
text : 'Akzeptieren'
}, {
text : 'Ablehnen'
} ]
} ],

// tpl : '<table class="itemdetail">'
// + '<tr><td class="tableheader">Beschreibung</td>'
// + '<td class="tablecontent">{description}</td></tr>'
//
// + '<tr><td class="tableheader">Datum</td>'
// + '<td class="tablecontent">{date}</td></tr>'
//
// + '<tr><td class="tableheader">Starter</td>'
// + '<td class="tablecontent">{starter}</td></tr>'
//
// + '<tr><td class="tableheader">Gehehmigungen</td>'
// + '<td class="tablecontent">{neededApprovals}</td></tr>'
//
// + '<tr><td class="tableheader">Genehmigt</td>'
// + '<td class="tablecontent">{approved}</td></tr>'
//
// + '</table>'

items : [ {
xtype : 'form',
scroll : 'vertical',

items : [ {
xtype : 'fieldset',
title : 'Personalanfrage',


items : [ {
xtype : 'textfield',
name : 'description',
label : 'Beschreibung',
disabled : true,
tpl : '{description}'
}, {
xtype : 'textfield',
name : 'date',
label : 'Datum',
disabled : true,
value: {
tpl : '{date}'
}
}, {
xtype : 'textfield',
name : 'starter',
label : 'Starter',
disabled : true,
tpl : '{description}'
}, {
xtype : 'textfield',
name : 'neededApprovals',
label : 'Freigaben benötigt',
disabled : true,
tpl : '{neededApprovals}'
}, {
xtype : 'textfield',
name : 'approved',
label : 'Genehmigt',
disabled : true,
tpl : '{approved}'
}, {
xtype : 'textareafield',
name : 'note',
label : 'Notiz'
} ]
} ]
} ]
});

Native3.views.detailPanel.superclass.initComponent.apply(this,
arguments);
},
});

Ext.reg('detailpanel', Native3.views.detailPanel);

Eraser
14 Sep 2011, 1:38 AM
This also might help me: how could I refresh my panel?
I'm testing to update the given data manually and can only access the initial value...



var desc = "Init Desc";


Native3.views.formPanel = new Ext.form.FormPanel({

load : function(data) {
desc = data.description;
this.show();
},

items : [ {
xtype : 'fieldset',
title : 'Personalanfrage',


items : [ {
xtype : 'textfield',
name : 'description',
label : 'Beschreibung',
disabled : true,
value: desc // init value is displayed
},
[...etc...]

Eraser
15 Sep 2011, 5:21 AM
I solved my problem. I'm not sure if it's the best solution but it works for my needs :-)

My solution is based on O'Reilly's example app. Specially http://dev.sencha.com/deploy/touch/examples/oreilly/src/SpeakerList.js helped me. Referenced to the method 'onSelect' here's my solution:



listeners : {
itemtap : function(component, index, item) {
var store = Native3.stores.newitemsstore;
var record = store.getAt(index);

var detailCard = new Native3.views.detailPanel();
detailCard.update(record.data);

Native3.views.Viewport.setActiveItem(detailCard, {
type: 'slide',
direction: 'left'
});
},

Note: to ensure that always the new content is being displayed create a new instance of the detail card/panel/view

This is the called update-method as you can see above


update : function(data) {
panel.load(data);
panel.doComponentLayout();
},


I implemented a seperate 'load' method to my FormPanel (please be aware of that I'm using a FormPanel). All variables are global - don't know if I could another way... but as long as this solution works I won't change it :-)
In this special case I access the corresponding poperty value of a form item. As you can see my form consists of 6 items.


load : function(data) {
desc = this.items.items[0].items.items[0];
desc.value = data.description;

date = this.items.items[0].items.items[1];
date.value = data.date;

starter = this.items.items[0].items.items[2];
starter.value = data.starter;

neededApprovals = this.items.items[0].items.items[3];
neededApprovals.value = data.neeedApprovals;

approved = this.items.items[0].items.items[4];
approved.value = data.approved;

note = this.items.items[0].items.items[5];
note.value = "";

desc.needLayout = true;
},



Feel free to ask if you have any questions. I hope I can help you.