Results 1 to 4 of 4

Thread: Data not showing in tpl

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    7
    Vote Rating
    0
      0  

    Default Answered: Data not showing in tpl

    Why in my View wasn't be able to show data in the label tpl, but the text fields showed? It's because whenever I tap, I should record too in my Controller? How I should do?

    Controller
    Code:
    Ext.define('MyApp.controller.User', {
        extend: 'Ext.app.Controller',
    
        config: {
            refs: {
                mainView: '#Main',
                userForm: '#UserForm',
                userList: '#UserList'
            },
    
            control: {
                "#UserList": {
                    itemtap: 'onListItemTap'
                },
                "[action=save]": {
                    tap: 'onSave'
                },
                "[action=delete]": {
                    tap: 'onDelete'
                }
            }
        },
    
        onListItemTap: function(dataview, index, target, record, e, eOpts) {
            var form = Ext.create("MyApp.view.MyFormPanel",
                {
                    title: record.data.firstName
                });
            this.getMainView().push(form);
            form.setRecord(record);
    
        },
    
        onSave: function(button, e, eOpts) {
            var me = this;
            var form = this.getUserForm();
            var record = form.getRecord();
            var values = form.getValues();
    
            record.set(values);
    
            if(record.isValid()){
                record.save( {
                    success: function()
                    {
                        me.getMainView().pop();
                        me.getUserList().deselectAll();
                    }
                });
            }
            else{
                Ext.Msg.Alert("Error", "erro!");
            }
        },
    
        onDelete: function(button, e, eOpts) {
            var me = this;
            var form = this.getUserForm();
            var record = form.getRecord();
    
            record.erase({
                success: function()
                {
                    record.stores[0].remove(record);
                    me.getMainView().pop();
                }
            });
        }
    
    });
    View
    Code:
    Ext.define('MyApp.view.MyFormPanel', {
        extend: 'Ext.form.Panel',
    
        config: {
            id: 'UserForm',
            items: [
                {
                    xtype: 'textfield',
                    label: 'Field',
                    name: 'firstName'
                },
                {
                    xtype: 'textfield',
                    label: 'Field',
                    name: 'lastName'
                },
                {
                    xtype: 'panel',
                    layout: {
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'button',
                            action: 'save',
                            flex: 1,
                            text: 'save'
                        },
                        {
                            xtype: 'button',
                            action: 'delete',
                            flex: 1,
                            text: 'delete'
                        }
                    ]
                },
                {
                    xtype: 'label',
                    tpl: [
                        '{firstName} {lastName}'
                    ]
                }
            ]
        }
    
    });

  2. Ok, the problem is the panel that you are trying to "configure" using the tpl is an inner item of your "main" (form panel). It does not "inherit" the main record automatically.

    You need to set its data by code. Add this on your "onListItemTap" function just after you set the record:

    Code:
    var panel = form.down('panel');
    panel.setData(record.data);

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •