1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    RaphaelIm is on a distinguished road

      0  

    Default Unanswered: Template that include another template

    Unanswered: Template that include another template


    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.

    Code:
    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:
    Code:
    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>'                
        }
    });
    Code:
    var liste = {
                xtype: "questionstpl",
                store: Ext.getStore('MyListOfQuestions'),
                        
            };
    this.add([topToolbar, liste]);
    I saw that in another post (sencha touch 1?):
    Code:
    {[ this.addCmp({xtype:"myselecttpl", name:"TheName" }) ]}
    But, that don't work with sencha touch 2.

    Thanks in advance,
    Raphaël.

  2. #2
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    RaphaelIm is on a distinguished road

      0  

    Default


    Isn't it possible?

    Thanks

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,754
    Answers
    3462
    Vote Rating
    827
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You need to only use one template and your xtemplate extension isn't correct
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    RaphaelIm is on a distinguished road

      0  

    Default


    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

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

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

  5. #5
    Sencha User
    Join Date
    Aug 2012
    Posts
    13
    Vote Rating
    0
    RaphaelIm is on a distinguished road

      0  

    Default


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

Thread Participants: 1

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