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
    35,669
    Answers
    3354
    Vote Rating
    746
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar