forum

Home / DeveloperSection / Forums / save state of the radiofield using sencha touch

Ask Question

save state of the radiofield using sencha touch

ravindra nalwaya309827-Oct-2014
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.    

sencha touchsencha touch sencha touch2 
Updated on 29-Oct-2014
ravindra nalwaya

ravindra nalwaya

Follow

Can you answer this question?

Answer

4 Answers

ravindra nalwaya

ravindra nalwaya

29-Oct-2014
Hi Sumit,
I have stored value in array and solved my problem. Thanks for your reply.
Sumit Kesarwani

Sumit Kesarwani

28-Oct-2014
Hi ravindra, 

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

ravindra nalwaya

27-Oct-2014
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()




Sumit Kesarwani

Sumit Kesarwani

27-Oct-2014
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.
MindStick Training

Liked By