How to Fill a Form With Record Data?

[Eraser]

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]

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]

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]

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/e...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.