CheckBox в списке

Question

Есть ли способ добавить флажки в шаблон элемента списка?

Я попытался следующие, что, конечно, не работает:

{ 
      xtype: 'list', 
      height: '100%', 
      itemId: 'checkList', 
      itemTpl: [ 
       '<div class="line">', 
       ' <div class="label">', 
       '  {text}', 
       ' </div>', 
       ' <input name="checkBox1" class="x-input-el x-input-checkbox" type="checkbox" tabindex="-1" />', 
       ' <div class="x-field-mask">', 
       '  ::after', 
       ' </div>', 
       ' <input name="checkBox2" class="x-input-el x-input-checkbox" type="checkbox" tabindex="-1" />', 
       ' <div class="x-field-mask">', 
       '  ::after', 
       ' </div>' 
      ], 
      store: 'myStore' 
}, 

я получил ссылочный код, проверяя флажок элемента, но я предполагаю, что я должен сделать его совершенно иначе для него в Работа.

Я попытался найти, но не могу найти способ сделать это.

Также, если есть способ отключить флажки, так что они доступны только для чтения, учитывая, что я не могу называть disable() для флажков, если они добавлены в шаблон элемента или я могу?

Answer 1

У вас есть два варианта:

1) Использование пользовательских HTML в шаблоне и регистрации для событий непосредственно на элементы DOM. Это может работать лучше и более настраиваемо, но имеет некоторые недостатки:

Вам нужно будет использовать http://docs.sencha.com/touch/2.4/2.4.2-apidocs/#!/api/Ext.DomQuery, чтобы выбрать элементы DOM и добавить к нему поведение. Хороший момент для этого - в магазине load метод. Вы также обязаны отменить привязки обработчиков, если элементы списка будут удалены/добавлены позже. Это решение невозможно реализовать, если вы хотите использовать бесконечный список Sencha Touch.

2) Использовать Ext.dataView и Ext.dataview.component.DataItem. Это позволяет использовать компоненты по вашему выбору в DataView. Вы должны реализовать что-то вроде этого:

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! MODEL 

Ext.define('TestModel', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [{ 
      name: 'val1' 
     }, { 
      name: 'val2' 
     }, { 
      name: 'val3' 
     }] 
    } 
}); 

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! STORE 

Ext.define('TestStore', { 
    extend: 'Ext.data.Store', 
    config: { 
     data: [{ 
      val1: 'A Button', 
      val2: 'with text', 
      val3: true 
     }, { 
      val1: 'The Button', 
      val2: 'more text', 
      val3: false 
     }, { 
      val1: 'My Button', 
      val2: 'My Text', 
      val3: true 
     }], 
     model: 'TestModel', 
     storeId: 'TestStore' 
    } 
}); 

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA ITEM 

Ext.define('MyDataItem', { 
    extend: 'Ext.dataview.component.DataItem', 
    alias: 'widget.mydataitem', 
    config: { 
     padding: 10, 
     layout: { 
      type: 'hbox' 
     }, 
     defaults: { 
      margin: 5 
     }, 
     items: [{ 
      xtype: 'button', 
      text: 'Val1' 
     }, { 
      xtype: 'component', 
      flex: 1, 
      html: 'val2', 
      itemId: 'textCmp' 
     }, { 
      xtype: 'checkboxfield', 
      flex: 1, 
      name : 'val3', 
      label: 'val3', 
      value: 'val3', 
      checked: 'val3' 
     }] 
    }, 
    updateRecord: function(record) { 
     var me = this; 

     me.down('button').setText(record.get('val1')); 
     me.down('#textCmp').setHtml(record.get('val2')); 
     me.down('checkboxfield').setChecked(record.get('val3')); 

     me.callParent(arguments); 
    } 
}); 

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! DATA VIEW 

Ext.define('MyDataView', { 
    extend: 'Ext.dataview.DataView', 
    config: { 
     defaultType: 'mydataitem', 
     useComponents: true 
    } 
}); 

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! RUN 

Ext.create('MyDataView', { 
    fullscreen: true, 
    store: Ext.create('TestStore') 
});