optgroup with Combo Box control

Question

Можно ли визуализировать <optgroup> теги в пределах выделенного с помощью встроенного или внешнего контроллера ExtLib?

Я хочу использовать собственное решение, поэтому getComponent() или валидаторы будут работать. Я думаю, что это дисквалифицирует встроенный html с jQuery/dojo.

Answer 1

Я нашел этот ответ на свой вопрос. Вычисляемые значения для комбинированного блока в Domino Designer могут возвращать векторы/массивы строк, обычно как возвращаемое значение @DbLookup или @DbColumn. Во время экспериментов я обнаружил, что вы можете вернуть собственный компонент для отдельных элементов, включая группу (которая наследуется от элемента select). Следующий фрагмент будет строить то, что я хотел: сгруппированная иерархия элементов.

<?xml version="1.0" encoding="UTF-8"?> 
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"> 
    <xp:comboBox id="comboBox1" value="#{viewScope.combo}"> 
     <xp:selectItems> 
      <xp:this.value><![CDATA[${javascript:var itms = new javax.faces.model.SelectItem[2]; 
var itm = null; 
itm = new javax.faces.model.SelectItem(); 
itm.setLabel("label1"); 
itms[0] = itm; 
itm = new javax.faces.model.SelectItem(); 
itm.setLabel("label2"); 
itms[1] = itm; 

var g = new javax.faces.model.SelectItemGroup(); 
g.setLabel("Group"); 
g.setSelectItems(itms); 
g 
}]]></xp:this.value> 
     </xp:selectItems> 
    </xp:comboBox> 
</xp:view> 

Пример:

Основываясь на этом примере можно объединить множество источников данных, чтобы строить вычислен <optgroup> комб, в том числе резервных бобов или контекстных переменные.

Answer 2

Кажется, что нет встроенной поддержки тега <optGroup>. Однако, в отличие от предположения о дисквалификации jQuery/dojo, похоже ли это решение. Где getComponent(), getValue(), setValue() и т. Д. Все еще работают.

Единственное, что нужно сделать для каждого <optGroup>, которое вы хотите, добавляет <xp:selectItem itemLabel="With your optGroup label" itemValue"optGroup1"></xp:selectItem>. При использовании нескольких <optGroups>'sitemValue необходимо увеличить на 1. Я вставил пример ниже, надеюсь, что это поможет.

<xp:this.resources> 
    <xp:script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" clientSide="true"></xp:script> 
</xp:this.resources> 
... 
<xp:comboBox id="comboBox1" styleClass="optGroup"> 
    <xp:selectItem itemLabel="Swedish Cars" itemValue="optGroup1"></xp:selectItem> 
    <xp:selectItem itemLabel="Volvo" itemValue="volvo"></xp:selectItem> 
    <xp:selectItem itemLabel="Saab" itemValue="saab"></xp:selectItem> 
    <xp:selectItem itemLabel="German Cars" itemValue="optGroup2"></xp:selectItem> 
    <xp:selectItem itemLabel="Mercedes" itemValue="mercedes"></xp:selectItem> 
    <xp:selectItem itemLabel="Audi" itemValue="audi"></xp:selectItem> 
</xp:comboBox> 

<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[ 
    //Iterate across the <option>'s for which the itemValues begin with "optGroup". 
    $('.optGroup option[value^="optGroup"]').each(function(index, node) { 
     //Use the actual itemValue ("optGroup1") to get all its siblings until the next 
     //<option> is found with (again) an itemValue of "optGroup" (i.e. "optGroup2"). 
     $('.optGroup option[value="' + node.value + '"]'). 
      //No harm for last iteration: .nextAll() will be used if the selector is 
      //not matched or is not supplied (in this example "optGroup3" won't get a match). 
      nextUntil('.optGroup option[value="optGroup' + (index + 2) + '"]'). 
      //Wrap them in a <optGroup> tag and give it its label (itemLabel). 
      wrapAll('<optGroup label="' + node.text + '"></optGroup>'); 
     //Remove the initial <option> since we no longer need it. 
     $(this).remove(); 
    }); 
    ]]></xp:this.value> 
</xp:scriptBlock> 

<xp:button value="Submit" id="button1"> 
    <xp:eventHandler event="onclick" submit="true" 
     refreshMode="complete"> 
     <xp:this.action><![CDATA[#{javascript: 
     print("Submitting: " + getComponent("comboBox1").getValue()); 
     }]]></xp:this.action> 
    </xp:eventHandler> 
</xp:button>