Results 1 to 7 of 7

Thread: Set programmatically tpl in ext.Panel

  1. #1

    Default Answered: Set programmatically tpl in ext.Panel

    Hi,
    I try to build my first app in Architect (Framework: Sencha touch).
    I have created a Ext.navigation.View (contattis) with a list of contacts. When one of this contacts is selected, an Ext.Panel (contattiDetails) containing details wrap in a tpl, is pushed in the view.

    Ext.Panel (contattiDetails) is so defined:
    Code:
    Ext.define('MyApp.view.contattiDetails', {
        extend: 'Ext.Panel',
        alias: 'widget.contattidetails',
        requires: [
            'Ext.XTemplate'
        ],
        config: {
            itemId: 'details',
            padding: 10,
            tpl: [
                '<div><label>undefined</span></div>'
            ]
        },
        initialize: function() {
            this.callParent();
            this.setTpl('<div><{des_nominativo}</div>');
        }
    });
    The tpl has default value = <div>undefined</div> and I'd like that tpl values change when the Panel is initialized (for that I set in inizialize this.setTpl('<div>{des_nominativo}</div>').

    All it is managed by a controller 'contattis' that pushes on the Ext.navigation.View (contattis) the Ext.Panel (contattiDetails).

    Controller 'contattis' is so defined:
    Code:
    Ext.define('MyApp.controller.contattis', {
        extend: 'Ext.app.Controller',
        alias: 'controller.contattis',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        config: {
            refs: {
                navView: 'contattis',
                list: 'contattis #list',
                addButton: 'contattis #addButton',
                editButton: 'contattis #editButton',
                removeButton: 'contattis #removeButton'
            },
    
            control: {
                "contattis #list": {
                    itemtap: 'select'
                }
            }
        },
    
        select: function(dataview, index, target, record, e, eOpts) {
            // Show details
            this.getNavView().push({
                xtype: 'contattidetails',
                title: 'contatti Details',
                record: record
            });
        }
    
    });
    The issue is that if I try to set the tpl in the initialize property of Ext.Panel (contattiDetails), and I run the app preview I see 'undefined' instead of 'des_nominativo'.

    Instead if I set the 'select' in the controller (see code below) so that it has assigned 'tpl:'. All works and I can see the des_nominativo value.
    Controller with 'tpl:' assigned:
    Code:
    Ext.define('MyApp.controller.contattis', {
        extend: 'Ext.app.Controller',
        alias: 'controller.contattis',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        config: {
            refs: {
                navView: 'contattis',
                list: 'contattis #list',
                addButton: 'contattis #addButton',
                editButton: 'contattis #editButton',
                removeButton: 'contattis #removeButton'
            },
    
            control: {
                "contattis #list": {
                    itemtap: 'select'
                }
            }
        },
    
        select: function(dataview, index, target, record, e, eOpts) {
            // Show details
            this.getNavView().push({
                xtype: 'contattidetails',
                title: 'contatti Details',
                record: record
                tpl: '</label><span>{des_nominativo}</span></div>'
            });
        }
    
    });
    I don't undestand because if I use setTpl when the Ext.Panel (contattiDetails) is inizialised, tpl value doesn't change, but if I set the tpl in the controller, tpl changes.
    Where is the mistake?

  2. I see.

    If you want to control any config using if, check this example:
    https://fiddle.sencha.com/#fiddle/1ch8

    For your previous question about tpl in the initialize listener check this example
    https://fiddle.sencha.com/#fiddle/1cha

  3. #2
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    Hi

    Your function initialize in the panel is wrong. You have to add it as a event binding.
    Select the panel, filter in the configs event bindings -> add basic event binding - event name initialize.

    The output code will look like this:
    Code:
    Ext.define('MyApp.view.MyPanel', {
        extend: 'Ext.Panel',
    
    
        config: {
            itemId: 'details',
            listeners: [{
                fn: 'onDetailsInitialize',
                event: 'initialize'
            }]
        },
    
    
        onDetailsInitialize: function(component, eOpts) {
            console.log("Panel is inicialized, I can do my stuff here");
        }
    
    
    });
    http://docs.sencha.com/touch/2.4/2.4...ent-initialize

    Regards
    Petr

  4. #3

    Default

    Hi Petr,
    thanks for the answer.
    I have tried your solution but it still not works
    Code:
    Ext.define('MyApp.view.contattiDetails', {
        extend: 'Ext.Panel',
        alias: 'widget.contattidetails',
    
        requires: [
            'Ext.XTemplate'
        ],
    
        config: {
            itemId: 'details',
            padding: 10,
            tpl: [
                '<div>',
                '<div><label>undefined</span></div>',
                '</div>'
            ],
            listeners: [
                {
                    fn: 'onDetailsInitialize',
                    event: 'initialize'
                }
            ]
        },
    
        onDetailsInitialize: function(component, eOpts) {
            component.setTpl('<div><label>des_nominativo</span></div>');
        }
    
    });
    It visualized 'undefined' instead des_nominativo.
    What's the difference between the two initialize?

  5. #4
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    You are right it seems that after using this.setTpl the new Tpl is set but the view is not refreshed.
    Btw why would you even want to use setTpl after initialization when you can define it directly.

    So I would just do this.
    Code:
    Ext.define('MyApp.view.contattiDetails', {
        extend: 'Ext.Panel',
    
    
        alias: 'widget.contattidetails',
        requires: ['Ext.XTemplate'],
    
    
        config: {
            itemId: 'details',
            padding: 10,
            tpl: ['<div><label>des_nominativo</span></div>']
        }
    
    
    });
    Because in the end it will be the same as if you would use setTpl after initialize.

  6. #5

    Default

    I prefer to use setTpl in the initialize because I have to do some control (like IF) to decide what tpl load in the panel.
    How can I set an IF in this declaration so that I can choose if load a tpl or another?

    Code:
     select: function(dataview, index, target, record, e, eOpts) {
    // Show details this.getNavView().push({ xtype: 'contattidetails', title: 'contatti Details', record: record , tpl: '</label><span>{des_nominativo}</span></div>'
    });
    }

  7. #6
    Sencha User
    Join Date
    Sep 2014
    Location
    Central Europe
    Posts
    795
    Answers
    103

    Default

    I see.

    If you want to control any config using if, check this example:
    https://fiddle.sencha.com/#fiddle/1ch8

    For your previous question about tpl in the initialize listener check this example
    https://fiddle.sencha.com/#fiddle/1cha

  8. #7

    Default

    Thanks,
    adding setData now all work.
    Just for further information, with this code
    Code:
    this.setData(this.getRecord().data);
    I can retrieve the data from the record

Similar Threads

  1. Replies: 4
    Last Post: 7 Mar 2014, 5:11 AM
  2. Replies: 1
    Last Post: 19 Feb 2014, 1:04 PM
  3. Refresh parent container on button press in child container.
    By manishroy in forum Sencha Touch 2.x: Q&A
    Replies: 3
    Last Post: 30 Jan 2014, 6:37 PM
  4. [FIXED] Setting the Config centered : true of an Ext.Container --> Container never hides
    By geekflyer in forum Sencha Touch 2.x: Bugs
    Replies: 8
    Last Post: 7 Feb 2012, 3:39 PM

Posting Permissions

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