Ask Question
Home > DeveloperSection > Forums > save state of the radiofield using sencha touch
ravindra nalwaya
ravindra nalwaya

Total Post:4

Points:28
Posted on    October-27-2014 5:18 AM

 Sencha Touch Sencha Touch  Sencha Touch2 
Ratings:


 4 Reply(s)
 1359  View(s)
Rate this:
Hi Sumit,
Can you please help to save state of the radiofield already selected using sencha touch. actully i am developing one app for multiple choice question. for ex:
There will be 10 questions. i will select 1st,3rd,4th questions radiofield, total answered question is 3 and now i will go back for the 2nd question which i have not selected. so how to maintain total answered question. if i go previous or next. can you please write sample code for the same.    


Sumit Kesarwani

Total Post:378

Points:2694
Posted on    October-27-2014 6:52 AM

Hi ravindra,

To do this in Sencha Touch, you will need to add event listeners like this:
var filter = {
    id: 'filter',
    items: [
        {
            xtype: 'fieldset',
            items: [
                {
                    type: 'checkboxfield',
                    name: 'city[1]',
                    label: 'city',
                    id: 'city1',
                    checked: true,
                    listeners: {
                        check: function() {
                            //do something
                        },
                        uncheck: function() {
                            //do something
                        }
                    }
                }
            ] // END items
        }
    ] // END items
}; 

Hope this will solve your problem.

report abuse
ravindra nalwaya
ravindra nalwaya

Total Post:4

Points:28
Posted on    October-27-2014 10:49 PM

Hi Sumit,

Thanks for the reply. 
But i will not have checkbox in my question, only radiofield. there will be four option for one question. you have to select one answer then move to next question. if you do not want to give answer of the next question skip and move to next question. then later you can go back and choose the answer. but again when i will go next after selecting skipped question then total answered question is counting already selected answer also. 
below is the my sample code. data is coming from sqlite database. there are 7 questions. 
database code is 
-----------------
database.js
---------------
var db = openDatabase('QA.sqlite', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
var results_sql;
var len_sql;
var main_ques = [];
var ans1 = [];
var ans2 = [];
var ans3 = [];
var ans4 = [];
var qImg = [];
var qId = [];

db.transaction(function (tx) {
    tx.executeSql('DROP TABLE IF EXISTS Question'); 
    tx.executeSql('CREATE TABLE IF NOT EXISTS Question(qID, qImg, Question, Ans1, Ans2, Ans3, Ans4)');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (1, "img/ques1.jpg", "What the hell is this language", "Java script", "Java", "Ajax", "Sencha Touch");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (2, "img/ques2.jpg", "What is your first company?", "Exilant", "Hcl", "Infosys", "TCS");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (3, "img/ques3.jpg", "Which was the 1st non Test playing country to beat India in an international match?", "Canada", "Sri Lanka", "Zimbabwe", "East Africa");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (4, "img/ques4.jpg", "Which county did Ravi Shastri play for?", "Glamorgan", "Leicestershire", "Gloucestershire", "Lancashire");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (5, "img/ques5.jpg", "Who is the first Indian woman to win an Asian Games gold in 400m run?", "M.L.Valsamma", "P.T.Usha", "Kamaljit Sandhu", "K.Malleshwari");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (6, "img/ques6.jpg", "In which year did Milkha Singh win the first National title in the 400 m race?", "1955", "1956", "1957", "1970");');
    tx.executeSql('INSERT INTO Question (qID, qImg, Question, Ans1, Ans2, Ans3, Ans4) VALUES (7, "img/ques7.jpg", "The Dronacharya Award is given to...?", "Sportsmen", "Coaches", "Umpires", "Sports Editors");');
});
    
var select = db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM Question', [], function (tx, results) {
         len_sql = results.rows.length, i;
            
        for (var i = 0; i < len_sql; i++){
            qId[i] = results.rows.item(i).qID;
        main_ques[i] = results.rows.item(i).Question;
        ans1[i] = results.rows.item(i).Ans1;
        ans2[i] = results.rows.item(i).Ans2;
        ans3[i] = results.rows.item(i).Ans3;
        ans4[i] = results.rows.item(i).Ans4;
        qImg[i] = results.rows.item(i).qImg;
        
        }
    }, null);
});
-----------
app.js
-----------
Ext.application({
    launch: function () {
   
    var logo = Ext.create('Ext.Img', {
            src: 'img/qans.jpg',
            layout:{
                type:'vbox',
                align:'middle'
        },
            id: 'logo', 
            mode: 'element',
            height: 200
        }); // create()   
var titleb = Ext.create('Ext.TitleBar', {
    id: 'titlebar',
docked: 'top',
    ui: 'light',
    // border: 3,
    //    style: 'border-color: red; border-style: solid;'
   
    });
   
        var i=0;
    var j=0;
    var k=0;
    var flag=0;
    var flag1=0;
var result="";
var checked = "tested";
var resultArray = [];
var setOption;
var without;
var withoutNo = [];
   var separate;
   var numi = [];
   var quesManage = [];
        var qnext = [];
   var answered = [];
        var contactForm = Ext.create('Ext.form.FormPanel', {
        extend: 'Ext.Container',
        
        fullscreen: true,
        renderTo: document.body,
        scrollable: false,
  //      scrollable : {
  //    direction     : 'horizontal',
  //    directionLock : true
//},
    //        layout:'fit', 
    listeners: {
            
                activate: function(){
                Ext.Function.createDelayed( function(){
               
if(i < len_sql){
  document.getElementById('ansl1').innerText = ans1[0];
  Ext.getCmp('ans1').setValue(ans1[0]);  
   document.getElementById('ansl2').innerText = ans2[0];
Ext.getCmp('ans2').setValue(ans2[0]);
document.getElementById('ansl3').innerText = ans3[0];
Ext.getCmp('ans3').setValue(ans3[0]);
document.getElementById('ansl4').innerText = ans4[0]; 
Ext.getCmp('ans4').setValue(ans4[0]);  
document.getElementById('titlebar').innerText = 'Questions:' + len_sql;// + 'Answered:' + (j);
document.getElementById('que').innerText = (i+1) + '.' + main_ques[0];
logo.setSrc(qImg[0]);
}
},1000,this)();

                }
            },
            items: [ 
titleb,
logo,
            {
                xtype: 'toolbar',
                layout: {
                    pack: 'center'
                }, // layout
                ui: 'plain',
                items: [{
xtype: 'label',
id: 'que'
},
{
xtype: 'hiddenfield',
id: 'qId'
                }
                ] 
            }, {
            
            
                xtype: 'fieldset',
                items: [{
                    xtype: 'radiofield',
                    id: 'ans1',                    
                    name: 'answer',
                    label: '<label id="ansl1"></label>',
                    listeners : { 
  check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
  alert("Label one:")
}
  }
}
                }, {
                    xtype: 'radiofield',
                    id: 'ans2',
                    name: 'answer',
                    label: '<label id="ansl2"></label>',
                    listeners : { 
  check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
  alert("Label two:")
}
  }
}
                },{
                    xtype: 'radiofield',
                    id: 'ans3',
                    name: 'answer',
                    label: '<label id="ansl3"></label>',
                    listeners : { 
  check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
  alert("Label three:")
}
  }
}
                },{
                    xtype: 'radiofield',
                    id: 'ans4',
                    name: 'answer',
                    label: '<label id="ansl4"></label>',
                    listeners : { 
  check : function( radioFld, event, obj) {
if(i == len_sql-1){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(radioFld.isChecked()) {
  alert("Label four:")
}
  }
}
                }
            
            ] // items
           
            }, {
                xtype: 'toolbar',
                cls: 'expand-panel',
                layout: {
                    pack: 'center'
                    
                }, // layout
                ui: 'plain',
                items: [{
                    xtype: 'button',
                    text: 'Prev',
                    id: 'prev',
                    cls: 'prevButton',
                    ui: 'back',
                    handler: function (btn, evt) {      
                    Ext.getCmp('next').removeCls('nextButton');              
                    if(i>1){
Ext.getCmp('prev').removeCls('prevButton');
}else{
Ext.getCmp('prev').addCls('prevButton');
}
if(i <= len_sql){
 var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
   without = ans[0].getGroupValue();
   withoutNo[i] = without;
if(withoutNo[i] != null) {
  var str = checked+i;
  var istr = ""+i+"";
  alert("Value of str:" +str);
  alert("Value of istr:" +istr);
      if((quesManage[i] == checked) || (str.indexOf(istr) >= 0)) {
                        alert("Tested!!!!!");        
          } else {
            quesManage[j] = checked+i;
            alert("Else loop: " +quesManage[j]);
            j++;
           
      }
} else {
alert("Value is null:");
}
   
   //      document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + quesManage.length;
result = qId[i] +":" + ans[0].getGroupValue();
// result = ans[0].getGroupValue();
resultArray[i] = result;
i = i-1;
document.getElementById('ansl1').innerText = ans1[i];
Ext.getCmp('ans1').setValue(ans1[i]);
document.getElementById('ansl2').innerText = ans2[i];
Ext.getCmp('ans2').setValue(ans2[i]);
document.getElementById('ansl3').innerText = ans3[i];
Ext.getCmp('ans3').setValue(ans3[i]);
document.getElementById('ansl4').innerText = ans4[i];   
Ext.getCmp('ans4').setValue(ans4[i]);
  
document.getElementById('que').innerText =  (i+1) + '.' + main_ques[i];
 //      document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
logo.setSrc(qImg[i]);
}
contactForm.reset(); 
setOption = resultArray[i].split(':');
                                ans[0].setGroupValue(setOption[1]);
                                
                    } // handler
                },                
                {
                    xtype: 'button',
                    text: 'Submit',
                    ui: 'confirm',
                    handler: function (btn, evt) {
                       
                        var answers = Ext.ComponentQuery.query('radiofield[name=answer]');
                        Ext.Msg.alert('Radiofield Vallue: ', answers[0].getGroupValue());
                        
                    } // handler
                },{
                    xtype: 'button',
                    text: 'Save',
                    ui: 'action',
                    handler: function (btn, evt) {
                       
                        var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
//result = qId[i] +":"+ ans[0].getGroupValue();
result =  ans[0].getGroupValue();
      
resultArray[i] = result;
for(var r=0; r < resultArray.length; r++){
if(resultArray[r] != null) {
// answered = resultArray[r];
} else {
       alert("Null value:")
       }
       
alert(resultArray[r]);
}
// document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + answered.length; 
                        Ext.Msg.alert('Saved');
                    } // handler
                }, {
                    xtype: 'button',
                    text: 'Next',
                    id: 'next',
                    cls: 'nextButton',
                    ui: 'forward',
                    handler: function (btn, evt) { 
                    Ext.getCmp('prev').removeCls('prevButton');
if(i == len_sql-2){
Ext.getCmp('next').addCls('nextButton');
}else{
Ext.getCmp('next').removeCls('nextButton');
}
if(i < len_sql){
var ans = Ext.ComponentQuery.query('radiofield[name=answer]');
without = ans[0].getGroupValue();
withoutNo[i] = without;
result = qId[i] +":"+ ans[0].getGroupValue();
//    result = ans[0].getGroupValue();
resultArray[i] = result;
if(withoutNo[i] != null) {
               for(var t=0; t<withoutNo.length; t++) {
         //      quesManage[t] = i;
               alert("Inside for loop:" +withoutNo[t]);
               alert("value of quesManage:" +quesManage[t]);
               }
               
document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
}
// if(ans[0].getGroupValue() != null){
i = i+1;
document.getElementById('ansl1').innerText = ans1[i];
Ext.getCmp('ans1').setValue(ans1[i]);
document.getElementById('ansl2').innerText = ans2[i];
Ext.getCmp('ans2').setValue(ans2[i]);
document.getElementById('ansl3').innerText = ans3[i];
Ext.getCmp('ans3').setValue(ans3[i]);
document.getElementById('ansl4').innerText = ans4[i];   
Ext.getCmp('ans4').setValue(ans4[i]);
 
document.getElementById('que').innerText = (i+1) + "." + main_ques[i];
//   document.getElementById('titlebar').innerText = 'Questions:' + len_sql + ' ' + 'Answered:' + withoutNo.length;
if(qImg[i]==""){
logo.setSrc("");
}else{
logo.setSrc(qImg[i]);
}
// }else{
// Ext.Msg.alert('Select any option.');
// }
}
contactForm.reset();
setOption = resultArray[i].split(':');
ans[0].setGroupValue(setOption[1]);
                     
                    } // handler
                }] // items (toolbar)
            }] // items (formpanel)
        }); // create()
     } // launch
}); // application()





report abuse
Sumit Kesarwani

Total Post:378

Points:2694
Posted on    October-28-2014 7:52 AM

Hi ravindra, 

you can listen to the change event of the radio buttons and add a counter.

report abuse
ravindra nalwaya
ravindra nalwaya

Total Post:4

Points:28
Posted on    October-29-2014 5:44 AM

Hi Sumit,
I have stored value in array and solved my problem. Thanks for your reply.

report abuse

Don't want to miss updates? Please click the below button!

Follow MindStick

Copyright © 2010 - 2015 MindStick Software Pvt. Ltd. All Rights Reserved.