Я пытаюсь создать простой прослушиватель виджетов для раскрывающегося списка и отображать различные поля ввода в зависимости от выбранного значения.
Одно значение должно отображать два текстовых поля, а если выбрано другое значение, оно будет отображать другой набор текстовых полей.
Должен ли я создать все текстовые поля и присвоить им свойство hidden, а затем, основываясь на раскрывающемся списке, найти узел и вызвать метод отображения? Как настроить таргетинг на разные узлы с помощью ExtJS?
Ниже одно из возможных решений.
Прежде всего, давайте создадим функцию, которая будет показывать нужные поля и скрывать другие:
var Toogle = {};
Toogle.manageFields = function manageFields(field) {
//Get the panel of the tab our drop down menu on
var panel = field.findParentByType('panel');
// Our text fields are stored in widgets of type dialogfieldset
// and we get their reference
var fieldSets = panel.findByType('dialogfieldset');
var fLength = fieldSets.length;
// Get value of selected option in out select box
var fieldValue = field.getValue();
for (var i = 0; i < fLength ; i++) {
var fieldSet = fieldSets[i];
// Values of options in our drop down menu correspond to
// respective properties in dialogfieldsets we will set next,
// so if value of selected options matches itemId we show this widget,
// otherwise - hide.
if (fieldValue === fieldSet.getItemId()){
fieldSet.show();
} else {
fieldSet.hide();
}
}
}
Теперь давайте посмотрим на наш диалог:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"
title="My dynamic dialog"
width="1000"
xtype="dialog">
<items
jcr:primaryType="cq:Widget"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<tab2
jcr:primaryType="cq:Panel"
title="tab2">
<items jcr:primaryType="cq:WidgetCollection">
<selection
jcr:primaryType="cq:Widget"
defaultValue="option1"
fieldLabel="choose field to show"
name="./tf"
type="select"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<option1
jcr:primaryType="nt:unstructured"
text="field set 1"
value="fs1"/>
<option2
jcr:primaryType="nt:unstructured"
text="field set 2"
value="fs2"/>
</options>
<listeners
jcr:primaryType="nt:unstructured"
loadcontent="function(field, rec, path){Toogle.manageFields(field);}"
selectionchanged="function(field, value){Toogle.manageFields(field);}"/>
</selection>
<fs1
jcr:primaryType="cq:Widget"
hidden="{Boolean}true"
itemId="fs1"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<text1
jcr:primaryType="cq:Widget"
fieldLabel="TextField1"
name="./text1"
xtype="textfield"/>
</items>
</fs1>
<fs2
jcr:primaryType="cq:Widget"
hidden="{Boolean}true"
itemId="fs2"
xtype="dialogfieldset">
<items jcr:primaryType="cq:WidgetCollection">
<text2
jcr:primaryType="cq:Widget"
fieldLabel="TextField2"
name="./text2"
xtype="textfield"/>
</items>
</fs2>
</items>
</tab2>
</items>
</items>
</jcr:root>
Его структура довольно проста. Мы создаем необходимые виджеты, а затем добавляем прослушиватели «loadcontent» и «selectionchanged», где мы вызываем одну и ту же функцию, но с разными параметрами (согласно Widgets API).
Надеюсь, это поможет вам. Не стесняйтесь спрашивать, если у вас есть какие-либо вопросы.
Два пути:
Первоначально установите для свойства «скрытый» всех текстовых полей значение true и назначьте идентификаторы для каждого текстового поля.
Позже добавьте функцию обработчика событий изменения в раскрывающийся список, который даст вам выбранное значение раскрывающегося списка.
В этой функции обработчика событий изменения напишите код для отображения/скрытия на основе выбранного значения.
Получите панель, в которой у вас есть раскрывающийся список, и динамически добавляйте элементы или удаляйте их в том же обработчике изменений, упомянутом выше. Однако это немного сложно.
Документы API для скрытия/отображения используют setVisible(true/false) в CQ.Ext.form.TextField. Чтобы получить текстовое поле, используйте CQ.Ext.getCmp("ID_OF_TEXTFIELD");
