Sencha Touch adding checkbox to list

[sim4life]

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]

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]

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]

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]

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]

I am not understanding i tried this but its giving me error...not giving any output.

[priya gupta]

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]

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..