Results 1 to 4 of 4

Thread: Expanding a combobox

  1. #1

    Default Answered: Expanding a combobox

    Hello there.
    I am seriously questioning my sanity right now.
    I have expanded the dropdown list of a combobox before but this time I can not get my head around why this does not work.
    See the following code;
    Code:
    ST.comboBox('formBuilder[itemId="contract_maintenance_add_form"] combo[itemId="favEntriesCombo"]')
            .expand();
    When using the inspect tool after this line of code it is clearly visible that ST has located the designated combobox,
    as the combobox gets focused with a 'blinking cursor' just like if you would want to type text in there.

    The test does not throw errors nor crashes but rather has a different outcome as I'd expect from it.

    Here's the HTML snippet of the comboBox:

    HTML Code:
    <div class="x-field x-form-item x-form-item-default x-form-type-text x-box-item x-toolbar-item x-field-default x-hbox-form-item x-form-item-no-label" style="width: 150px; left: 239px; top: 0px; margin: 0px;" role="presentation" id="combo-2655">
        <label id="combo-2655-labelEl" data-ref="labelEl" class="x-form-item-label x-form-item-label-default x-unselectable" style="padding-right:5px;width:105px;" for="combo-2655-inputEl">
            <span class="x-form-item-label-inner x-form-item-label-inner-default" style="width:100px">
                <span id="combo-2655-labelTextEl" data-ref="labelTextEl" class="x-form-item-label-text"></span>
            </span>
        </label>
        
        <div id="combo-2655-bodyEl" data-ref="bodyEl" role="presentation" class="x-form-item-body x-form-item-body-default x-form-text-field-body x-form-text-field-body-default ">
            <div id="combo-2655-triggerWrap" data-ref="triggerWrap" role="presentation" class="x-form-trigger-wrap x-form-trigger-wrap-default">
                <div id="combo-2655-inputWrap" data-ref="inputWrap" role="presentation" class="x-form-text-wrap x-form-text-wrap-default">
                    <input id="combo-2655-inputEl" data-ref="inputEl" type="text" size="1" name="combo-2655-inputEl" aria-hidden="false" aria-disabled="false" role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="combo-2655-inputEl combo-2655-picker-listEl" aria-autocomplete="list" aria-invalid="false" aria-readonly="false" aria-describedby="combo-2655-ariaStatusEl" aria-required="false" class="x-form-field x-form-text x-form-text-default  x-form-empty-field x-form-empty-field-default" autocomplete="off" data-componentid="combo-2655" aria-activedescendant="ext-2511">
                </div>
                <div id="combo-2655-trigger-picker" class="x-form-trigger x-form-trigger-default x-form-arrow-trigger x-form-arrow-trigger-default " role="presentation"></div>
            </div>
            <span id="combo-2655-ariaStatusEl" data-ref="ariaStatusEl" aria-hidden="true" class="x-hidden-offsets"></span>
            <span id="combo-2655-ariaErrorEl" data-ref="ariaErrorEl" aria-hidden="true" aria-live="assertive" class="x-hidden-clip"></span>
        </div>
    </div>

  2. It's most likely a remote combobox then - where data isn't loaded in to the underlying Combobox's data store until the trigger is clicked or you start typing text in the field, at which point data is then fetched from the server. The "expand" API in Sencha Test behind the scenes uses an Ext JS API to show the picker, but it doesn't trigger the load of the data so that's why you aren't seeing anything, because there is no data.

    In order to trigger the load of the data and show the picker, try interacting with remote comboboxes using this approach - by clicking on the actual expand trigger/button:

    Code:
    ST.element('formBuilder[itemId="contract_maintenance_add_form"] combo[itemId="favEntriesCombo"] => .x-form-trigger')
        .click();

  3. #2
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    354
    Answers
    61

    Default

    What happens exactly, when you call "expand" - does it not show any drop-down?

    Is it a remotely loaded combobox? What happens if you add a short delay before calling "expand"?
    Daniel Gallo
    Sales Engineer
    Sencha

  4. #3

    Default

    After executing the .expand()-Method the combobox switches from its regular, 'unselected' state Attachment 58103

    To a selected one Attachment 58104 as if you clicked on it in order to type text in there.

    Adding wait() statements before each step results in the same behaviour.

  5. #4
    Sencha - Sales Team daniel.gallo's Avatar
    Join Date
    Apr 2009
    Location
    London, England
    Posts
    354
    Answers
    61

    Default

    It's most likely a remote combobox then - where data isn't loaded in to the underlying Combobox's data store until the trigger is clicked or you start typing text in the field, at which point data is then fetched from the server. The "expand" API in Sencha Test behind the scenes uses an Ext JS API to show the picker, but it doesn't trigger the load of the data so that's why you aren't seeing anything, because there is no data.

    In order to trigger the load of the data and show the picker, try interacting with remote comboboxes using this approach - by clicking on the actual expand trigger/button:

    Code:
    ST.element('formBuilder[itemId="contract_maintenance_add_form"] combo[itemId="favEntriesCombo"] => .x-form-trigger')
        .click();
    Daniel Gallo
    Sales Engineer
    Sencha

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •