Automtically get drop down in extJS tagfield

0
votes

Is there any way by which my dropdown arrow of tagfield can automatically get clicked. Here is my fiddle, I want As soon as I load the page MY drop down get clicked.

My fiddle https://fiddle.sencha.com/#view/editor&fiddle/219s

5
javascriptextjs

5 Answers

1
votes

If you don't need the physical click, only the resulting open menu, the pickerfield provides a function expand that opens the picker menu. You can call it from the afterrender event, for example:

listeners:{
    afterrender: function(tagfield) {
        tagfield.expand();
    }
}
1
votes

For 

   "$(".x-form-arrow-trigger").click()"

to work you need to use jquery.

if youre not using jquery, you can do it with the JS version aswell:

 document.getElementsByClassName("x-form-arrow-trigger").click();

a good idea would be to call it inside a "onload function" like this 

window.onload = function() {
    document.getElementsByClassName("x-form-arrow-trigger").click();
};

so the dropdown button gets clicked when the window's load event fires.

0
votes

Try this:

 $(".x-form-arrow-trigger").click()
0
votes

If you want to perform an operation after loading the document, you have several options in ExtJs:

Ext.onReady

You can pass a function to Ext.onReady. This callback functions are executed after the document is loaded.

Ext.onReady( () => {
    Ext.ComponentQuery.query('tagfield:first').pop().expand();    
});

Event-Listener

Another option is to use the afterrending event.

tagfieldInstance.on('afterrender', (cmp) => cmp.expand());

//or

{
    xtype: 'tagfield',
    fieldLabel: 'Select a Show',
    store: shows,
    displayField: 'show',
    valueField: 'id',
    queryMode: 'local',
    filterPickList: true,
    listeners: {
        afterrender: function (cmp) {
            cmp.expand();
        }
    }
}
0
votes

You could try onTriggerClick here is a fiddle