UniqueSearchComponent.html:
<div class="${baseClass}">
<div data-dojo-type="dijit/_HasDropDown" data-dojo-props="dropDown: 'containerNode'">
<div data-dojo-type="dijit/form/TextBox"
name="${SearchViewFieldName}Textbox"
class="${baseClass}Textbox"
data-dojo-props="placeholder:'${fieldName}'"></div>
<div class="${baseClass}Container" data-dojo-attach-point="containerNode"></div>
</div>
</div>
UniqueSearchComponent.js:
/**
* Javascript for UniqueSearchComponent
*/
define([ "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin",
"dojo/text!./templates/UniqueSearchComponent.html",
"dijit/form/TextBox", "dijit/_HasDropDown" ], function(declare,
_WidgetBase, _TemplatedMixin, template, TextBox) {
return declare([ _WidgetBase, _TemplatedMixin ], {
templateString : template,
SearchViewFieldName : "",
fieldName : ""
});
});
Created to be utilized in the following manner:
<div data-dojo-type="js/widgets/UniqueSearchComponent"
data-dojo-props="SearchViewFieldName: 'machineSearchView.name', fieldName: 'Name:'">
<div data-dojo-type="dojo/store/Memory"
data-dojo-id="machineNameStore"
data-dojo-props="<s:property value='%{getNameJsonString()}'/>"></div>
<s:set name="MachineName" value="machineSearchView.name"
scope="request"></s:set>
<div data-dojo-type="dijit/form/ComboBox"
data-dojo-props="store:machineNameStore, searchAttr:'name', value:'${MachineName}'"
name="machineSearchView.name" id="machineSearchView.name"></div>
</div>
The main idea is:
- The user initially views only the textbox with the placeholder.
- Upon clicking it, the containerNode expands and displays what's inside, which can be a
dijit/Select, adijit/form/ComboBox, or adijit/form/FilteringSelect. The internal element also automatically expands. - The user chooses a value in the internal select, which then gets slightly altered to appear in the TextBox as
${fieldName}:${value}.
The server processes the data from the internal element's value.
Currently struggling with configuring the _HasDropDown functionality correctly. The TextBox renders as an element with zero height before revealing the internal element. Uncertain how to bind the internal nodes for proper dropdown behavior.