PDA

View Full Version : Sencha Touch adding checkbox to list



sim4life
24 Nov 2010, 10:55 AM
Hi, Doing development in Sencha Touch 1.0. I'm using Ext.List to render a list, but I also want the start of each list item to start with a checkbox. I also want to change its state based on an array item value, the array which is given to config option. Is there a way to add a simple Ext.form.Checkbox to an Ext.List.

If I instead use a to the config option, then it looks ugly in display and secondly I don't know how to listen to events on the checkbox

Here is the code for ur eye candy:


var groupingBase = {
itemTpl: '<div class="contact2"><strong>{title}</strong></div>',
selModel: {
mode: 'SINGLE',
allowDeselect: true
},
// grouped: true,
indexBar: true,

onItemDisclosure: {
scope: 'test',
handler: function(record, btn, index) {
alert('Disclose more info for ' + record.get('title'));
}
},

store: new Ext.data.Store({
model: 'Todos',
sorters: 'title',

getGroupString : function(record) {
return record.get('title')[0];
},

data: [todos] //todos array is prev populated with required items' properties
})
};

myList = new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
//List ends

tasksFormBase = {
title: 'Tasks',
iconCls: 'favorites',
cls: 'card2',
badgeText: '4',
layout: 'fit',
items: [
myList,
{
xtype: 'checkboxfield',
name: 'cool',
label: 'Cool'
}
],
dockedItems: [todosNavigationBar]
};

//tasksFormBase is then added to a Ext.TabPanel config option


any help form Ext master???

sim4life
1 Dec 2010, 3:55 AM
I was able to place html checkbox into the
itemTpl : '<div class="todo_list">'
'<input type="checkbox" id="todo_check_{todo_id}"/> <strong>{title}</strong'
'</div>'
then I used the
listeners : {
itemtap: function(dataview, index, el, e) {
var todo = dataview.store.getAt(index).data;
chbox = el.querySelector('#todo_check_'+todo.todo_id);
chbox.checked;
}

chbox.checked gives the wrong state: when checked it says false and when unchecked it says true?!?!

weird any other clues....

sim4life
9 Dec 2010, 3:15 AM
Yes I did get a workaround working...
I used the itemTpl property of the List control with the tpl looking like:


<textarea id="todos-template" class="x-hidden-display">
<div id="todo_item_{todo_id}" class="todo_list">
<input type="checkbox" id="todo_check_{todo_id}" class="todo_checkbox unchecked"/> <strong>{title}</strong>
</div>
</textarea>

and the

itemtap: function(dataview, index, item, event) {
var todo = dataview.store.getAt(index).data;
if (eve.getTarget('input#todo_check_'+todo.todo_id)) {
Ext.get(item).addCls('selected');
ele = Ext.get('todo_check_'+todo.todo_id);

//reverse condition as the event is fired before the state is set
if(!ele.getAttribute('checked')) {
todo.completed_at = Api.formatDate(new Date());
ele.replaceCls('unchecked', 'checked');
} else {
ele.replaceCls('checked', 'unchecked');
todo.completed_at = null;
}
}

So on tapping the list item, I detect whether the checkbox is tapped and change the relevant div CSS classes accordingly. I hope the same thing can work for radio as well.

priya gupta
15 Dec 2011, 12:53 AM
I am not able to create a list with checkbox. Why to use dataview to create list it can't be done without dataview.
Please Help how can I create a list with checkbox

Sameer Khan
15 Dec 2011, 1:28 AM
HI, It might be useful for you...Try this
Note: If u create Html checkbox in sencha touch list it won't work,because when u scroll list will disappear..
I faced this problem last 7 months back...so i found one more solution...try this following code....
Sample Code
----------------------
1. Css:
----------
.GoalInterCheck:checked:after,.checkitem:after,.checkitem.done:after{content:"";position:absolute;width:0.75em;height:1.25em;top:50%;left:auto;-webkit-transform:rotate(45deg) skew(5deg);-webkit-transform-origin:50% 50%;right:0.5em;border:.35em solid;border-top:none;border-left:none;margin-top:2.0em;}
.checkitem{float:right;width:70px;height:28px}.checkitem:after{border-color:#DDDDDD}.checkitem.done:after{border-color:#06346A}
Add this css to your index.html page or in your custom css page but not in sencha-touch.css

2. Javascript Event :
-----------------
function toogleSelection( item ){
if(item.className=="GoalInterCheck checkitem "){
item.className = "GoalInterCheck checkitem done";
}
else
item.className = "GoalInterCheck checkitem ";
}

3. Ext.List :
---------
var List= new Ext.XTemplate(
'<tpl for=".">',
'<span style="float:left;height:65px;" id=lb_{carepracticeID}>{description}</span>,
'<span style="float:right;margin-right:-12px;" id=txt_{[xindex-1]} onClick="javascript:toogleSelection(this);" class="GoalInterCheck checkitem {[values.completed==true ? "done" : ""]}">&nbsp;</span>',
'</tpl>'
);
this.giList ={
xtype:'list',
itemTpl:List,
store: this.fiteringoal,
scroll:false,
disableSelection: true,
listeners:{itemtap: this.onDsListItemTap,scope:this}
};

priya gupta
15 Dec 2011, 10:24 PM
I am not understanding i tried this but its giving me error...not giving any output.

priya gupta
15 Dec 2011, 10:39 PM
var List= new Ext.XTemplate(
'<tpl for=".">',
'<span style="float:left;height:65px;" id=lb_{carepracticeID}>{description}</span>,
'<span style="float:right;margin-right:-12px;" id=txt_{[xindex-1]} onClick="javascript:toogleSelection(this);" class="GoalInterCheck checkitem {[values.completed==true ? "done" : ""]}">&nbsp;</span>',
'</tpl>'
);
this.giList ={
xtype:'list',
itemTpl:List,
store: this.fiteringoal,
scroll:false,
disableSelection: true,
listeners:{itemtap: this.onDsListItemTap,scope:this}
};



in xtemplate u have given tpl right. Are u displaying the list here?? and what is this.onDsListItemTap

Sameer Khan
15 Dec 2011, 10:51 PM
Yes, What ever i have in my sqlite database table i am displaying those records in List...And what ever i select items from list ,those items should be saved into other table..

bmagana
25 Aug 2013, 9:57 AM
I saw your example and this is great!

I just have a question... when your refers to function toogleSelection to put in Javascript event...



2. Javascript Event :
-----------------
function toogleSelection( item ){
if(item.className=="GoalInterCheck checkitem "){
item.className = "GoalInterCheck checkitem done";
}
else
item.className = "GoalInterCheck checkitem ";
}


where does exactly I have to put it? I create a toogleSelection in the controller but on the execution it never found it... so in the console, i get a "toogleSelection is not defined".


Thanks
Blas

sk_cts
12 Nov 2013, 6:11 AM
Hi Sameer,

Good approach to get checkbox in list. I have tried and got succesfully. But if we have to show list item as selected by programmatically . hw can we ve to approach?

i have tried ,
Forming the span tag manually with specifying id and class and passing to on click event but in UI not reflecting. Can u share me any approach to show item as selected?

For eg in list we have Ext.getCmp('ListComponenet').select(index)