CODEWITHSUNDEEP
extjsdialogselectionaem
sefirosu
sefirosu

Reputation: 2658

CQ/AEM extjs get selection dropdown box text, and get page path

Say I have a component with dialog drop to parsys on a content page /content/phonegap/ss/en_gb/login/home/test1/jcr:content/par/productimage

now inside the dialog i have something like enter image description here

I wish to get $PATH append to URL and send selected device e.g the text 'Device ID:HTC_10_GOLD', to servlet in this dialog listener extjs:

<deviceAndColour
        jcr:primaryType="cq:Widget"
        allowBlank="{Boolean}false"
        fieldLabel="Device and Colour"
        name="./deviceAndColour"
        options="/bin/reference/data/device.devices.json$PATH"
        type="select"
        xtype="selection">
    <listeners
            jcr:primaryType="nt:unstructured"
            selectionchanged="function(pathfield) {
                var selected = this.findParentByType('form').find('name', './deviceAndColour')[0].getText();
                console.log( this.findParentByType('form').find('name', './deviceAndColour')[0].getText());
                $.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json$PATH?selectedDevice=' + selected + '&colour=red', function(jsonData){
                    selectBox.setOptions(jsonData);
                });
            }" />
</deviceAndColour>

So bascially, the console.log( this.findParentByType('form').find('name', './deviceAndColour')[0].getText()); is not working as I expected, neither the $PATH inside the dialog listener js, it does not retrieve the path at all.

Apart from above attempt, I know var selected = this.findParentByType('form').find('name', './deviceAndColour')[0].getValue(); this will get the value asscociated with the select correctly, but I do not need value, I just wish to getText(), and get the current $PATH in extjs.

another questions, you may noticed $.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json$PATH?selectedDevice=' + selected + '&colour=red'

how do I skip the & in this listner, as if i use & directly, project won't even build. there must be someway to skip & and let extjs treat as part of the string to send request

Anyone expereinced this before? please suggest with code example.
Thanks

Upvotes: 0

Views: 1690

Answers (1)

mickleroy
mickleroy

Reputation: 1008

Getting the text of the option selected:

function(field,value){
    for(var i = 0; i < field.options.length; i++) {
        if(field.options[i].value === value) {
            console.log('Selected: ' + field.options[i].text);
            break;
        }
    }
}

Getting the path to the resource being edited:

function(field,value){
    console.log("Resource:" + field.findParentByType("dialog").path);
}

Documentation: https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.Selection

UPDATE

Please try the following code adapted to your scenario (I also refactored the code to make use of params when providing query parameters. There is no reason why this shouldn't work.

function(field, value) {
    var selected = '';
    var path = field.findParentByType("dialog").path;

    // get text of option selected
    for(var i = 0; i < field.options.length; i++) {
        if(field.options[i].value === value) {
            selected = field.options[i].text;
            break;
        }
    }

    var params = {
        selectedDevice: selected,
        colour: 'red'
    }

    $.getJSON('/bin/reference/data/device/availablecolour.availablecolour.json'+path, params, function(jsonData){
        // FIXME: how are you getting the "selectBox" reference?
        selectBox.setOptions(jsonData);
    });
}

Upvotes: 1

Related Questions