1. #1
    Sencha User
    Join Date
    Nov 2010
    Posts
    17
    Vote Rating
    0
    sim4life is on a distinguished road

      0  

    Default Sencha Touch adding checkbox to list

    Sencha Touch adding checkbox to list


    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:

    Code:
    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???

  2. #2
    Sencha User
    Join Date
    Nov 2010
    Posts
    17
    Vote Rating
    0
    sim4life is on a distinguished road

      0  

    Default ...progress

    ...progress


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

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    17
    Vote Rating
    0
    sim4life is on a distinguished road

      0  

    Default


    Yes I did get a workaround working...
    I used the itemTpl property of the List control with the tpl looking like:

    HTML Code:
    <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
    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Location
    PUNE,INDIA
    Posts
    28
    Vote Rating
    0
    priya gupta is on a distinguished road

      0  

    Question problem with list with checkbox

    problem with list with checkbox


    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

  5. #5
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    113
    Vote Rating
    0
    Sameer Khan is on a distinguished road

      0  

    Smile Solution for adding for check box to list

    Solution for adding for check box to list


    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}
    };
    Sameer Khan

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Location
    PUNE,INDIA
    Posts
    28
    Vote Rating
    0
    priya gupta is on a distinguished road

      0  

    Default


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

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Location
    PUNE,INDIA
    Posts
    28
    Vote Rating
    0
    priya gupta is on a distinguished road

      0  

    Default


    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

  8. #8
    Sencha User Sameer Khan's Avatar
    Join Date
    Oct 2011
    Location
    Bangalore, India
    Posts
    113
    Vote Rating
    0
    Sameer Khan is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Jan 2011
    Posts
    3
    Vote Rating
    0
    bmagana is on a distinguished road

      0  

    Default Hi Sameer!

    Hi Sameer!


    I saw your example and this is great!

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

    Code:
    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

  10. #10
    Sencha User
    Join Date
    Oct 2013
    Posts
    3
    Vote Rating
    0
    sk_cts is on a distinguished road

      0  

    Default


    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)

Similar Threads

  1. Sencha Touch - List
    By Riaz in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 5 Mar 2012, 12:04 AM
  2. Sencha Touch List components not scrolling in PhoneGap
    By dorchard in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 12 Dec 2011, 8:20 AM
  3. Does Sencha Touch allow us to do adding and deleting in the data store?
    By jedihua in forum Sencha Touch 1.x: Discussion
    Replies: 2
    Last Post: 13 Oct 2010, 2:16 PM
  4. sencha touch list store problem
    By reminder in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 27 Jun 2010, 11:33 AM

Thread Participants: 4

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi