1. #1
    Sencha User Eraser's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    11
    Answers
    1
    Vote Rating
    0
    Eraser is on a distinguished road

      0  

    Default Answered: How to Fill a Form With Record Data?

    Answered: How to Fill a Form With Record Data?


    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
    Last edited by Eraser; 15 Sep 2011 at 5:22 AM. Reason: code deleted due to bad format

  2. 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:

    Code:
    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
    Code:
    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.
    Code:
    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.

  3. #2
    Sencha User Eraser's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    11
    Answers
    1
    Vote Rating
    0
    Eraser is on a distinguished road

      0  

    Default


    Sorry about the bad code above (I deleted it)

    Code:
    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);

  4. #3
    Sencha User Eraser's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    11
    Answers
    1
    Vote Rating
    0
    Eraser is on a distinguished road

      0  

    Default


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

    Code:
    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...]

  5. #4
    Sencha User Eraser's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    11
    Answers
    1
    Vote Rating
    0
    Eraser is on a distinguished road

      0  

    Lightbulb SOLVED

    SOLVED


    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:

    Code:
    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
    Code:
    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.
    Code:
    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.

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi