1. #1
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default Answered: Sencha Touch: Display a list in another from nested JSON

    Answered: Sencha Touch: Display a list in another from nested JSON


    So what I mean
    I have JSON contain another JSON. Need display list of answers inside list of question
    Example what I want to see at this moment:
    Question 1+2=?
    Answers
    -1
    -5
    -3 ....
    Now display just first answer from JSON answer

    Pe8IV.png

    Need display all answer, as radiobox.
    My JSON

    Code:
    [
        {
            "id": 7,
            "answers": [
                {
                    "id": 6,
                    "answer": "1",
                    "isCorrect": false
                },
                {
                    "id": 7,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 5,
                    "answer": "3",
                    "isCorrect": true
                }
            ],
            "question": "1+2=?"
        },
        {
            "id": 14,
            "answers": [
                {
                    "id": 28,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 31,
                    "answer": "7",
                    "isCorrect": true
                },
                {
                    "id": 29,
                    "answer": "2",
                    "isCorrect": false
                },
                {
                    "id": 30,
                    "answer": "6",
                    "isCorrect": false
                }
            ],
            "question": "2+5=?"
        },
        {
            "id": 9,
            "answers": [
                {
                    "id": 13,
                    "answer": "3",
                    "isCorrect": false
                },
                {
                    "id": 11,
                    "answer": "5",
                    "isCorrect": false
                },
                {
                    "id": 14,
                    "answer": "6",
                    "isCorrect": true
                },
                {
                    "id": 12,
                    "answer": "7",
                    "isCorrect": false
                }
            ],
            "question": "3+3=?"
        }
    ]
    My models, views and app.js

    Code:
    Ext.define('Sencha.model.Question', {
        extend: 'Ext.data.Model',
    
        requires: ['Sencha.model.Answer'],
    
        config: {
            fields: [
                'question'
            ],
    
            proxy: {
                type: 'ajax',
                url: 'contacts.json',
                reader : {
                    type : 'json'
                }
            },
             
    
            hasMany: {
                model: "Sencha.model.Answer",
                associationKey: 'answers'
            }
        }
    });
    
    Ext.define('Sencha.model.Answer', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                'answer'
            ],
    
            belongsTo: "Sencha.model.Question"
        }
    });
    
    Ext.define('Sencha.view.Questions', {
        extend: 'Ext.List',
        xtype: 'questions',
    
        config: {
            title: 'Stores',
            cls: 'x-questions',
    
            store: 'Questions',
            itemTpl:[
                '{question}',
                '<div>',
                    '<h2><b>Answers</b></h2>',
                    '<tpl for="answers">',
                        '<div> - {answer}</div>',
                    '</tpl>',
                '</div>'
            ].join('')
        }
    });
    
    Ext.define('Sencha.view.Answer', {
        extend: 'Ext.form.Panel',
        xtype: 'answer',
    
        config: {
            title: 'Answer',
            cls: 'x-questions',
    
            store: 'Questions',
            /*itemTpl: [
            '<div>{answer}</div>'
            ].join('')*/
            items:[
                 xtype: 'radiofield',
                 value: {answer}
            ]
        }
    });
    
    Ext.define("Sencha.view.Main", {
        extend: 'Ext.tab.Panel',
        requires: ['Ext.TitleBar',  'Sencha.view.Questions'],
    
        config: {
            tabBarPosition: 'bottom',
    
            items: [
                {
                    title: 'Questions',
                    iconCls: 'home',
    
                    xtype: 'questions'
                }
            ]
        }
    });
    
    Ext.define('Sencha.store.Questions', {
        extend: 'Ext.data.Store',
    
        config: {
            model: 'Sencha.model.Question',
            autoLoad: true/*,
            //sorters: 'name',
            grouper: {
                groupFn: function(record) {
                    return record.get('name')[0];
                }
            }*/
        }
    });
    
    
    
    //<debug>
    Ext.Loader.setPath({
        'Ext': 'sdk/src'
    });
    //</debug>
    
    Ext.application({
        name: 'Sencha',
    
        requires: [
            'Ext.MessageBox'
        ],
    
        views: ['Main'],
        stores: ['Questions'],
        models: ['Question', 'Answer'],
    
        launch: function() {
            // Destroy the #appLoadingIndicator element
            Ext.fly('appLoadingIndicator').destroy();
    
            // Initialize the main view
            Ext.Viewport.add(Ext.create('Sencha.view.Main'));
        }
    });
    But in final variant need rabio button, not list answers, with answers.


    I try create in https://fiddle.sencha.com/, but got error's. can read some files.

    https://fiddle.sencha.com/#fiddle/qn It may be useful, all my code

    Thx!

  2. Good try.
    But I was thinking of a method inside the tpl:
    Code:
    '<div class="question">{question}</div>',
    '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
    {
        getAnswers: function (answers,id) {  //  <===== Method
            var returnString='';
            Ext.each(anwers, function(answer, index){
                     returnString += '<input type="radio" name="' + id + '" value="' + index + '">' + answer.answer + '<br>';
             });
            return returnString;
         }
    }
    Model:

    Code:
    Ext.define('Sencha.model.Question', {
         extend: 'Ext.data.Model',  //
        requires: ['Sencha.model.Answer'],
          config: {
             fields: [
                 'id', 'questionid', 'answers', 'question'
             ],
              proxy: { 
                type: 'ajax',
                 url: 'contacts.json',
                 reader : {
                     type : 'json'
                 }
             } 
        }
     }); 

  3. #2
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    You already asked this, but did not respond to my questions here.

    I'll give it another try, but please stick to this thread. No need to bloat the forum.

    This sounds like a security question pop up. Right?

    I would definately not use two stores for this. I would create a custom component, which takes the data from a single store.

    If this is what you are trying to do please let me know.
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  4. #3
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default


    This sounds like a security question pop up. Right?
    I don't understand what you mean, sorry.
    I want generate on page questions with answers(radio). User check's answer, after that(at the end click on button for example) shows the result. Now I have a problem, can't display more than one answer, from JSON and don't found solution how make radio in sencha style in this variant of code

    First of all need display all answer on page. I have a variant of this, but don't work.
    If you have some other idea, please share or explain on example. Maybe have idea for my code.

    Thank you!
    Sorry for my english.

  5. #4
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    I think the solution is the itemTpl and not multiple stores.
    If you are trying to make an lms you might want to have pretty fixed question styles.

    So this one is multiple choice. (While I personally would prefer single pages per question) Here is such an itemTpl:

    Code:
    <div class='question'>{question}</div>
    <input type="radio" name="{id}" value="0"> {answers[0].answer}<br>
    <input type="radio" name="{id}" value="1"> {answers[1].answer}<br>
    <input type="radio" name="{id}" value="2"> {answers[2].answer}<br>
    <input type="radio" name="{id}" value="3"> {answers[3].answer}<br>
    Now after doing so you might want create the same structure for the inputs as sencha does for radio buttons. To find out about that you can use development tools of chrome
    Example
    Code:
    <div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled">
    <div class="x-form-label" style="width: 30% !important">
    <span>{answers[0].answer}</span> </div>
    <div class="x-component-outer"> <div class="x-unsized x-field-input"> <input id="ext-element-24" class="x-input-el x-form-field x-input-radio" type="radio" name="{id}" disabled="">
    </div> </div> </div>
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  6. #5
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default


    Answers not fixed. Can be 2, 3, 4 .. 10 answers on question. Like in my JSON 1-st question with 3 answers, 2 and 3 with 4 answers.
    If we have unknown size better use loop?

    Anyway thx.

  7. #6
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default


    you can use XTemplate function and loop.
    Do you know how this works?
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  8. #7
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default


    No or yes. I use some loop in my code, but didn't work

    Code:
    itemTpl:[
                '{question}',
                '<div>',
                    '<h2><b>Answers</b></h2>',
                    '<tpl for="answers">',
                        '<div> - {answer}</div>',
                    '</tpl>',
                '</div>'
            ].join('')

  9. #8
    Sencha User
    Join Date
    Feb 2011
    Location
    Düsseldorf, Germany
    Posts
    574
    Answers
    34
    Vote Rating
    31
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      1  

    Default


    Good try.
    But I was thinking of a method inside the tpl:
    Code:
    '<div class="question">{question}</div>',
    '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
    {
        getAnswers: function (answers,id) {  //  <===== Method
            var returnString='';
            Ext.each(anwers, function(answer, index){
                     returnString += '<input type="radio" name="' + id + '" value="' + index + '">' + answer.answer + '<br>';
             });
            return returnString;
         }
    }
    Model:

    Code:
    Ext.define('Sencha.model.Question', {
         extend: 'Ext.data.Model',  //
        requires: ['Sencha.model.Answer'],
          config: {
             fields: [
                 'id', 'questionid', 'answers', 'question'
             ],
              proxy: { 
                type: 'ajax',
                 url: 'contacts.json',
                 reader : {
                     type : 'json'
                 }
             } 
        }
     }); 
    • Kurt001
    Code Review | Send PM


    Need to include a test case use:
    https://fiddle.sencha.com/#home

  10. #9
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default


    Ok, will try and take answer how work.
    Thx!

  11. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    12
    Vote Rating
    0
    UserQ is on a distinguished road

      0  

    Default


    I use your code

    Code:
    Ext.define('Sencha.view.Questions', {
        extend: 'Ext.List',
        xtype: 'questions',
    
        config: {
            title: 'Stores',
            cls: 'x-questions',
    
            store: 'Questions',
            itemTpl:new Ext.XTemplate(
                '<div class="question">{question}</div>',
                '{[this.getAnswers(values.answers, values.id)]}',  // <==== Call of the method
                {
                    getAnswers: function (answers,id) {  //  <===== Method
                        var returnString='';
                        Ext.each(answers, function(answer){
                                 returnString += '<input type="radio" name="' + id + '" value="0">' + answer.answer + '<br>';
                         });
                        return returnString;
                     }
                }
            )
        }
    });
    but have same problem only first answer on each question.

    sameProb.png

    Any idea?

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..." hd porno faketaxi