Может ли любой орган помочь мне с кодом для создания панели с флажками внутри комбинированного поля в extjs 4.2

Question

Я хочу, чтобы флажки внутри поля со списком в extjs 4.2 я пробовал приведенный ниже код, но он не работает, может быть я не могу заставить его работать, но он использует изображения, чтобы показать проверку и снять флажок. может кто-нибудь помочь мне?

function stackoverflow() { 
Ext.create('Ext.form.field.ComboBox', { 
    fieldLabel: 'Select multiple names ', 
    id: 'BCCAddress', 
    name: 'BCCAddress', 
    maxHeight: 150,   
    width: 500, 
    multiSelect: true, 
    emptyText : "Select Bcc email addresses", 
    renderTo: 'fi-form', 
    //store: myArrayStore, 
    store: new Ext.data.SimpleStore({ 
     fields: ['name'], 
     data : myArrayStore 
    }), 

    displayField: 'name', 
    valueField: 'name', 
    forceSelection: false, 
    editable: false, 
    mode: 'MULTI', 
    triggerAction: 'all', 
    listConfig : {   
     getInnerTpl : function() { 
      return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>'; 
     } 
    } 
}); 
} 

Answer 1

Я думаю, что это плохая идея, sencha не нравится при изменении стандартного поведения. Но это просто «клод». У вашего кода нет правильного стиля css. Посмотрите на это:

var data = [ 
    [1, 'Ext.Js'], 
    [2, 'Angular.js'], 
    [3, 'Ember.js'], 
    [4, 'Олю'] 
]; 

// in real solution add it to your css file 
var customStyle = ".x-boundlist-item img.chkCombo { width: 13px; height: 13px; background: transparent url('https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }" + ".x-boundlist-selected img.chkCombo { background-position: 0 -13px; width: 13px; height: 13px; background: transparent url(https://extjs.cachefly.net/ext-4.0.7-gpl/resources/themes/images/default/form/checkbox.gif'); }"; 

Ext.util.CSS.createStyleSheet(customStyle); 


Ext.create('Ext.form.field.ComboBox', { 
    fieldLabel: 'I like', 
    id: 'BCCAddress', 
    name: 'BCCAddress', 
    maxHeight: 150, 
    width: 500, 
    multiSelect: true, 
    emptyText: "", 
    renderTo: Ext.getBody(), 

    store: new Ext.data.SimpleStore({ 
     id: 0, 
     fields: ['Id', 'Name'], 
     data: data 
    }), 

    displayField: 'Name', 
    valueField: 'Id', 
    forceSelection: false, 
    editable: false, 
    mode: 'local', 
    triggerAction: 'all', 
    listConfig: { 
     getInnerTpl: function() { 
      return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {Name} </div>'; 
     } 
    } 
}); 

---

Fiddle

Answer 2

флажков в выпадающем списке невозможно.
Период.

Подумайте об этом по-другому, и вы найдете решение.

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

Это будет выглядеть и вести себя так, как вы описываете.

Вывод:
Вы должны изменить свой подход. Рамка предлагает кирпичи, которые вы собрали, чтобы получить то, что вы хотите. Как LEGO. Если вы возьмете правильные кирпичи, вы сможете добиться больших успехов за несколько минут.

В настоящее время вы внедряете кирпичи, которых не существует, и пытайтесь заставить что-то работать таким невозможным способом, каким вы себя чувствовали. Зачем вам тогда использовать фреймворк? Вы можете изобретать невозможных, даже летающих телят или змею с семью головами.