Sencha Touch ExtJS ajout d'une case à cocher à la liste

Question

Développement dans Sencha Touch 1.0. J'utilise Ext.List pour rendre une liste, mais je veux aussi que le début de chaque élément de la liste commence par une case à cocher. Je veux également changer son état basé sur une valeur d'élément de tableau, le tableau qui est donné à l'option de configuration. Est-il possible d'ajouter une simple Ext.form.Checkbox à une Ext.List.

Si je place un <input type="checkbox".../> à l'option de configuration <itemTpl>, il semble laid dans l'affichage et d'autre part, je ne sais pas comment écouter les événements sur la case à cocher

Voici le code pour ur bonbons pour les yeux:

Ext.regModel('Todos', { 
    fields: ['title', 'completed_at'] 
}); 

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 est ensuite ajouté à une option de configuration Ext.TabPanel

toute aide sous forme maître poste ???

Answer 1

Je compris, je dois utiliser un modèle je la propriété itemTpl du contrôle de la liste des tpl ressemblant à:

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

et a ajouté l'auditeur suivant:

itemtap: function(dataview, index, item, event) { 
var todo = dataview.getStore().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; 
        } 
} 

Donc, en appuyant sur l'élément de la liste, je détecte si la case à cocher est sélectionnée et modifie les classes CSS div correspondantes en conséquence. J'espère que la même chose peut aussi fonctionner pour la radio.

Answer 2

Pour Sencha Touch, les icônes sont stockées dans une police: Pictos. Voici le caractère map Par exemple, voici comment j'ai créé un bouton de case à cocher (Note: la fonction de rappel est manquante pour le lien). Changez simplement la couleur de police pour indiquer vérifié ou pas.

En Css:

a { 
text-decoration: none; 
} 
.icon { 
font-family: "Pictos"; 
} 

En HTML:

<span> 
    Item #1 
    <a href="#"> 
    <span class="icon">3</span> 
    </a> 
</span>