Sencha Touch ExtJS добавление флажка в список - PullRequest
Новая
       1

Sencha Touch ExtJS добавление флажка в список

4 голосов
/ 24 ноября 2010

Разработка в Sencha Touch 1.0. Я использую Ext.List для отображения списка, но я также хочу, чтобы начало каждого элемента списка начиналось с флажка. Я также хочу изменить его состояние, основываясь на значении элемента массива, массив которого передается параметру config. Есть ли способ добавить простой 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 master ???

Ответы [ 2 ]

5 голосов
/ 31 января 2011

Я понял, мне нужно использовать шаблон, я использовал свойство itemTpl элемента управления List с tpl, похожим на: 

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

Итак, при нажатии на элемент списка, я определяю, установлен ли флажок, и соответственно изменяю соответствующие CSS-классы div.Я надеюсь, что то же самое может работать и для радио.

0 голосов
/ 10 марта 2014

Для Sencha Touch значки хранятся в шрифте: Pictos.Вот символ карта Например, так я создал кнопку-флажок (Примечание: функция обратного вызова отсутствует для ссылки).Просто измените цвет шрифта, чтобы указать, отмечен или нет.

В Css: 

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

В HTML: 

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