Template that include another template

[RaphaelIm]

Hello,

I work with Sencha Touch 2 and I try to insert a template in another template, it's a way to do that?

I explain, I have a few views that insert a component (html select) with a list of predefined results. I don't want to hard coded this component.

For example:
I using Ext.List with a store to display a list of questions and in this list I want to include the html select that comes from another template.

Ext.define("MyApp.view.QuestionsTpl", {
    extend: "Ext.List",
    alias: "widget.questionstpl",
    config: {
        loadingText: "Chargement ...",
        emptyText: '</pre>' +
                '<div class="list-empty-text"></div>' +
                '<pre>',
    onItemDisclosure: true,
        itemTpl: '</pre>' +
                '<div class="list-item-bloc">' +
                '<div class="list-item-q">{question}</div>' +
                '<div class="list-item-r">THE SELECT</div>' +
                '</div>' +
                '<pre>'
      }
});

The select tpl:

Ext.define("MyApp.view.MySelectTpl", {    
extend: "Ext.XTemplate",
    alias: "widget.myselecttpl",
    config: {
        itemTpl: '<select name="{name}">' +
                '<option value=""> - Choix - </option>' +
                '<option value="1"> + </option>' +
                '<option value="2"> +* </option>' +
                '<option value="3"> B </option>' +
                '<option value="5"> A2 </option>' +
                '<option value="4"> A1 </option>' +
                '<option value="6"> X </option>' +
                '<option value="7"> 0 </option>' +
                '</select>'                
    }
});

var liste = {
            xtype: "questionstpl",
            store: Ext.getStore('MyListOfQuestions'),
                    
        };
this.add([topToolbar, liste]);

I saw that in another post (sencha touch 1?):

{[ this.addCmp({xtype:"myselecttpl", name:"TheName" }) ]}

But, that don't work with sencha touch 2.

Thanks in advance,
Raphaël.

[RaphaelIm]

Isn't it possible?

Thanks

[mitchellsimoens]

You need to only use one template and your xtemplate extension isn't correct

[RaphaelIm]

Hi Mitch,

Thank you for your answer but I need to use more than one template.

I simplified the tpl in order to show example, normally, the app require a template for questions and one other for sections (where are a lot of questions).
In question tpl, you can choose a ponderation for the question
In section tpl, all questions which depend on the section are impacted
Later, the list of responses must come from a database

I found a begin of solution for multi use of a same element in one template (function resultList()):
Now my XTemplate is correct

Ext.define("MyApp.view.Tpl.QuestionTpl", {
    extend: "Ext.List",
    alias: "widget.questiontpl",
    config: {
        loadingText: "Chargement ...",
        emptyText: '</pre>' +
                '<div class="list-empty-text"></div>' +
                '<pre>',
        itemTpl: new Ext.XTemplate('</pre>' +
                '<div class="list-item-bloc-pc"> \
                <div class="list-item-bloc-title"> \
                <div class="list-item-pc-numerotation">{numerotation}</div> \
                </div> \
                <div class="list-item-bloc-resul"> \
                <div class="list-item-pc-title">{pc.categories}</div> \
                <div class="list-item-pc-name">{pc.nompc}</div> \
                <div class="list-item-pc-documentation">' +
                '{[this.resultList(\'resul_documentation\', values.id, values.resul_documentation)]}' +             
                '</div> \
                <div class="list-item-pc-implementation">' + 
                '{[this.resultList(\'resul_implementation\', values.id, values.resul_implementation)]}' + 
                    '</div> \
                <div class="list-item-pc-conclusion">' + 
                '{[this.resultList(\'resul\', values.id, values.resul)]}' + 
                    '</div>' +
                '<div class="list-item-pc-com">' +
                    '<textarea name="remarques_precision[{id}]" id="remarques_precision{id}" width="100%" onchange="updateValue(\'remarques_precision\', {id}, this, {resul_documentation});">{remarques}</textarea> \
                </div>' + 
                '<div class="list-item-pc-desc">{pc.descpc}</div>' +
                '<div class="list-item-pc-conform"></div>' +
                '</div> \
                </div>' +
                '<pre>',
                {

                resultList: function (name, id, value) {
                    
                    var html = '<select name="'+name+'['+id+']" onchange="updateValue(\''+name+'\', '+id+', this, '+value+');">';
                    
                    for(var cpt=0; cpt < 8; cpt++) {
                        switch(cpt) {
                            case 0:
                                html+= '<option value="0" '+(value==0 ? 'selected' : '')+'> - Choix - </option>'; break;
                            case 1:
                                html+= '<option value="1" '+(value==1 ? 'selected' : '')+'> + </option>'; break;
                            case 2:
                                html+= '<option value="2" '+(value==2 ? 'selected' : '')+'> +* </option>'; break;
                            case 3:
                                html+= '<option value="3" '+(value==3 ? 'selected' : '')+'> B </option>'; break;
                            case 4:
                                html+= '<option value="4" '+(value==4 ? 'selected' : '')+'> A1 </option>'; break;
                            case 5:
                                html+= '<option value="5" '+(value==5 ? 'selected' : '')+'> A2 </option>'; break;
                            case 6:
                                html+= '<option value="6" '+(value==6 ? 'selected' : '')+'> X </option>'; break;
                            case 7:
                                html+= '<option value="7" '+(value==7 ? 'selected' : '')+'> 0 </option>'; break;
                        }
                        
                    }
                    html += '</select>';
                    return html;
                }
                })
    }   
});

Now, I have another unknow ...
How can I generate this list and catch events? If I add a listener (with addListeners) after dom is loaded, the elements will only fire event from Ext.dom.Element and not from a textarea, in this example, I need to catch onchange for update localstorage ... Right now, it's hardcoded ...

var liste = {
            xtype: 'questiontpl',
            store: Ext.getStore('QuestionsList'),
            baseCls: 'list-pc',
            listeners : {
                painted : function(panel) {
                    var el = panel.bodyElement,
                        descriptif = el.down('textarea');


                    descriptif.on('singletap', function(e, El, o, t) { alert('OK'); }, panel);
                }
            }
        };

If someone have any idea? ....

[RaphaelIm]

Ok, I didn't use the good component !

If you want to use form fields and catch events or to do any manipulations with components, you have to use dataview and dataitem, it's the only way to design a list with fields.
http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2

In my case, this is the code :

The view that call the dataitem component

loadList: function () {
        
        /// suppression des listes qui auraient déjà été chargées ds cette vue
        this.removeAll();
        
        var storelRPC = Ext.getStore('lRPc');
                
        /// nouvelle liste avec les données requises pour l'affichage
        var newStore = {
            fields: ['idrp', 'numerotation', 'categories', 'nompc', 'resul', 
                     'resul_documentation', 'resul_implementation', 'remarques', 'date_updated']    
        };
                                        
        var cptRpc = 1;
        var dataStore = new Array();
        storelRPC.each(function (item) {
            dataStore.push({idrp: item.get('id'),
                            numerotation: item.PointControleBelongsToInstance.get('ordre'), 
                            categories: item.PointControleBelongsToInstance.get('categories'),
                            nompc: item.PointControleBelongsToInstance.get('nompc'),
                            resul: item.get('resul'),
                            resul_documentation: item.get('resul_documentation'),
                            resul_implementation: item.get('resul_implementation'),
                            remarques: item.get('remarques'),
                            descpc: item.PointControleBelongsToInstance.get('descpc'),
                            date_updated: item.get('date_updated')
                          });
            cptRpc++;
        });
    
        newStore.data = dataStore;
                        
        /// données de configuration de la dataview + passage de la liste de données
        var liste = Ext.create('Ext.DataView', {
            fullscreen: true,
            
            store: newStore,
            
            useComponents: true,
            defaultType: 'lignepc',
            baseCls: 'list-pc-item'
        });
        
        this.add([liste]);
        
    },

The dataitem component

Ext.define("MyApp.view.Component.LignePc", {
    extend: 'Ext.dataview.component.DataItem',
    xtype: 'lignepc',
    requires: ['Ext.Label', 'Ext.field.TextArea', 'Ext.field.Select'],
    
    config: {        
        numerotation: {
            cls: 'item-numerotation'
        },
        categories: {
            cls: 'item-categories'
        },
        nompc: {
            flex: 2,
            cls: 'item-nompc'
        },
        documentation: {
            options: [
               {text: '- Choix -',  value: '0'},
               {text: '+', value: 1},
               {text: '+*', value: 2},
               {text: 'B', value: 3},
               {text: 'A1', value: 4},
               {text: 'A2', value: 5},
               {text: 'X', value: 6},
               {text: '0', value: 7}
            ],
            cls: 'item-documentation'
        },
        implementation: {
            options: [
               {text: '- Choix -',  value: '0'},
               {text: '+', value: 1},
               {text: '+*', value: 2},
               {text: 'B', value: 3},
               {text: 'A1', value: 4},
               {text: 'A2', value: 5},
               {text: 'X', value: 6},
               {text: '0', value: 7}
            ],
            cls: 'item-implementation'
        },
        conclusion: {
            options: [
               {text: '- Choix -',  value: '0'},
               {text: '+', value: 1},
               {text: '+*', value: 2},
               {text: 'B', value: 3},
               {text: 'A1', value: 4},
               {text: 'A2', value: 5},
               {text: 'X', value: 6},
               {text: '0', value: 7}
            ],
            cls: 'item-conclusion'
        },
        remarques: {
            height: '250px',
            cls: 'item-remarques'
        },
        
        descpc: {
            cls: 'item-descpc'
        },
        
        dataMap: {
            getNumerotation: {
                setHtml: 'numerotation'
            },
            getCategories: {
                setHtml: 'categories'
            },
            getNompc: {
                setHtml: 'nompc'
            },
            getDocumentation: {
                setValue: 'resul_documentation'
            },
            getImplementation: {
                setValue: 'resul_implementation'
            },
            getConclusion: {
                setValue: 'resul'
            },
            getRemarques: {
                setValue: 'remarques'
            },
            getDescpc: {
                setHtml: 'descpc'
            }
        },
        layout: {
            type: 'hbox',
            align: 'left'
        },
        styleHtmlContent: true
    },
    
    applyNumerotation: function (config) {
        return Ext.factory(config, Ext.Label, this.getNumerotation());
    },
    
    updateNumerotation: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            this.add(newValue);
        }
    },
    
    applyCategories: function (config) {
        return Ext.factory(config, Ext.Label, this.getCategories());
    },
    
    updateCategories: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            this.add(newValue);
        }
    },
    
    applyNompc: function (config) {
        return Ext.factory(config, Ext.Label, this.getNompc());
    },
    
    updateNompc: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            this.add(newValue);
        }
    },
    
    applyConclusion: function (config) {
        return Ext.factory(config, Ext.field.Select, this.getConclusion());
    },
    
    updateConclusion: function (newValueC, oldValueC) {
        if (oldValueC) {
            this.remove(oldValueC);
        }


        if (newValueC) {
            newValueC.on('change', this.onConclusionChange, this);
            
            this.add(newValueC);
        }
    },
    
    onConclusionChange: function (obj, newValueC, oldValueC, eOpts) {
        /// empêche la mise à jour lors de l'initialisation des composants
        if (newValueC !== null && oldValueC !== null) {
            var record = this.getRecord();        
                this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'resul', newValueC);


                this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'date_updated', Ext.Date.now());
        }    
    },
    
    applyDocumentation: function (config) {
        return Ext.factory(config, Ext.field.Select, this.getDocumentation());
    },
    
    updateDocumentation: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            newValue.on('change', this.onDocumentationChange, this);
            
            this.add(newValue);
        }
    },
    
    onDocumentationChange: function (obj, newValue, oldValue, eOpts) {
        /// empêche la mise à jour lors de l'initialisation des composants
        if (newValue !== null && oldValue !== null) {
            var record = this.getRecord();
                
                if (typeof(newValue) == 'number') {
                    this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'resul_documentation', newValue);


                    this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'date_updated', Ext.Date.now());
                }
        }    
    },
    
    applyImplementation: function (config) {
        return Ext.factory(config, Ext.field.Select, this.getImplementation());
    },
    
    updateImplementation: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            newValue.on('change', this.onImplementationChange, this);
            
            this.add(newValue);
        }
    },
    
    onImplementationChange: function (obj, newValue, oldValue, eOpts) {
        /// empêche la mise à jour lors de l'initialisation des composants
        if (newValue !== null && oldValue !== null) {
            var record = this.getRecord();
            
            if (newValue !== oldValue) {        
                    this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'resul_implementation', newValue);


                    this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'date_updated', Ext.Date.now());
            }
            
        }    
    },
    
    applyRemarques: function (config) {
        return Ext.factory(config, Ext.field.TextArea, this.getRemarques());
    },
    
    updateRemarques: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            
            newValue.on('change', this.onRemarquesChange, this);
            
            this.add(newValue);
        }
    },
    
    onRemarquesChange: function (obj, newValue, oldValue, eOpts) {
        /// empêche la mise à jour lors de l'initialisation des composants
        if (oldValue !== null) {
            var record = this.getRecord();
                        
            if (newValue !== oldValue) {
                this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'remarques', newValue);


                this.fireEvent("updateStore", this, 'lRPc', 'id', record.get('idrp'), 'date_updated', Ext.Date.now());
            }
        }        
    },
    
    applyDescpc: function (config) {
        return Ext.factory(config, Ext.Label, this.getDescpc());
    },
    
    updateDescpc: function (newValue, oldValue) {
        if (oldValue) {
            this.remove(oldValue);
        }


        if (newValue) {
            this.add(newValue);
        }
    },
});