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

SAVE STATE OF THE RADIOFIELD USING SENCHA TOUCH

ravindra nalwaya
ravindra nalwaya

Total Post:4

Points:28
Posted by  ravindra nalwaya
 1704  View(s)
Ratings:
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.    

  1. Sumit Kesarwani

    Post:378

    Points:2694
    Re: save state of the radiofield using sencha touch

    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.

      Modified On Apr-06-2018 01:36:01 AM
  1. ravindra nalwaya

    Post:4

    Points:28
    Re: save state of the radiofield using sencha touch

    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()




      Modified On Apr-06-2018 01:37:55 AM
  1. Sumit Kesarwani

    Post:378

    Points:2694
    Re: save state of the radiofield using sencha touch

    Hi ravindra, 


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

      Modified On Apr-06-2018 01:36:24 AM
  1. ravindra nalwaya

    Post:4

    Points:28
    Re: save state of the radiofield using sencha touch

    Hi Sumit,

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

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!

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