Sencha Touch ExtJSリストにチェックボックスを追加

Question

Sencha Touch 1.0で開発中です。 Ext.Listを使ってリストをレンダリングしていますが、各リスト項目の先頭にチェックボックスを付けることも欲しいです。私はまた、配列オプション値に与えられた配列項目値に基づいて状態を変更したい。 Ext.form.CheckboxをExt.Listに追加する方法はありますか？

私が代わりに<input type="checkbox".../>に<itemTpl>設定オプションを使用する場合、それは、ディスプレイで醜い、第二に、私は、チェックボックスここ

上のイベントを監視する方法がわからないウル目の保養のためのコードです：

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は、その後Ext.TabPanelの設定オプション

任意のヘルプ形式のExtマスターに追加されます？

Answer 1

私は、私は次のように見ている私はTPLとListコントロールのitemTplプロパティを使用するテンプレート を使用する必要があります考え出し：

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

と、次のリスナーを追加しました：

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

をそこで、リスト項目をタップすると、チェックボックスがタップされているかどうかが検出され、それに応じて該当するdiv CSSクラスが変更されます。ラジオでも同じことができることを願っています。

Answer 2

Sencha Touchのアイコンは、Pictosのフォントで保存されています。ここに文字がありますmap たとえば、これはチェックボックスボタンを作成したものです（注：コールバック関数はリンクにはありません）。単にチェックしているかどうかを示すフォントの色を変更してください。 CSSで

：

HTMLで

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

：

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