Szeretem használni a FieldSet komponenst Checkbox-szal. (checkboxToggle: true) Jól látszódik, hogy a konténer és a komponensei között milyen viszony áll fent.
Hasznos, ha nem csak a checkbox-ra lehet kattintani, hanem a teljes cím kattintható. (titleCollapse: true) Ám sajnos ezzel a property-vel több probléma is van: 1. betesz egy teljesen felesleges és zavaró "toggle" ikont a checkbox és a cím közé. (igaz ez kikapcsolható: hideCollapseTool: true) 2. a checkbox elromlik, ami elég komoly probléma. :) A checkbox-ra kattintva is lefut a váltás, majd mivel a header komponensen is rajta van a kattintás figyelés, ezért mégegyszer lefut a váltás. Tehet az eredmény csupán egy villanás.
Legegyszerűbbnek az az út tűnik, ha a címre kattintást, mi magunk kezeljük le:
title: 'my fieldset',
xtype: 'fieldset',
checkboxToggle: true,
collapsed: true,
items: [{title: 'Hello'}],
listeners: {
render: function (cmp) {
cmp.checkbox.next()
.on('click', cmp.toggleCollapse, cmp)
.applyStyles({cursor: 'pointer'});
}
}
};
Mindez ExtJS 4-ben? Itt ez valahogy egy az egyben kimaradt. Itt nincs titleCollapse. De legalább hiba sincs. :)
title: 'my fieldset',
xtype: 'fieldset',
checkboxToggle: true,
collapsed: true,
items: [{title: 'Hello'}],
listeners: {
render: function (cmp) {
cmp.titleCmp.el
.on('click', cmp.toggle, cmp)
.applyStyles({cursor: 'pointer'});
}
}
};