Autoload Panel Listener ExtJs

Question

I have view file in extjs with a listener code, here it is:

initComponent: function() {
            Ext.apply(this, {
                title               : 'Form Order',
                iconCls             : 'orderIcon',
                width               : 850,
                maxHeight           : 600,
                x                   : 200,
                y                   : 50,
                resizable           : true,
                resizeHandles       : 's n',
                constrainHeader     : true,
                closable            : true,
                modal               : true,
                autoShow            : false,
                autoScroll          : true,
                overflow            : 'auto',
                layout: {
                    type: 'auto',
                    align: 'stretch'
                },
                items: [
                    this.createPanelMC()
                ]
            });
            this.callParent(arguments);
        },
        createPanelMC: function() {
            this.requiredSign = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
            var panel = Ext.create('Ext.form.Panel', {
                defaultType: 'textfield',
                name: 'nodebPanel',
                width: '100%',
                layout: {
                    type: 'auto',
                    align: 'stretch'
                },
                items: [{
                    xtype   : 'fieldset', 
                    name    : 'modlayanan',
                    title   : 'Data Pelanggan',
                    layout  : 'column',
                    width   : '95%',
                    margin  : '10',
                    items: [{
                        xtype           : 'textfield',
                        name            : 'nomor',
                        id              : 'nomor',
                        itemId          : 'nomor',
                        fieldLabel      : 'PSTN',
                        emptyText       : 'Nomor...',
                        margin          : '10 0 0 0',
                        width           : 350,
                        labelWidth      : 100,
                        afterLabelTextTpl: this.requiredSign    
                    }, {
                        xtype           : 'textfield',
                        fieldLabel      : 'Speedy',
                        name            : 'speedy',
                        id              : 'speedyVal',
                        itemId          : 'speedyVal',
                        margin          : '10 0 10 20',
                        width           : 350,
                        labelWidth      : 100
                    }, { 
                        xtype        : 'textareafield',
                        name         : 'instaLAddress',
                        fieldLabel   : 'Alamat Instalasi',
                        emptyText    : 'Alamat Instalasi...',
                        readOnly     : true,
                        labelWidth   : 100,
                        autofocus: true,
//listener
                        listeners   : {
                            render: function() {
                                this.getEl().on('mousedown', function(e, t, eOpts) {
                                var nopstn = Ext.getCmp('nomor').getValue();
                                var speedy = Ext.getCmp('speedyVal').getValue();

                                    if (nopstn != '' && speedy != '') {
                                        var store = Ext.ComponentQuery.query('#treeProduct')[0].getStore();
                                        console.log(store);
                                        store.load({
                                            params: {
                                                nopstn: nopstn,
                                                speedy: speedy
                                            }
                                        });
                                    }
                                });
                            }
                        }
                    }, 
                    this.createTreePaketExist(),
                    ]
                }]
            });
            return panel;
        },
createTreePaketExist: function() {
            var storeTree = Ext.create('Ext.data.TreeStore', {
                proxy: {
                    type: 'ajax',
                    url: 'data/newoss_get_paket.php',
                    actionMethods :{
                        create: 'POST', read: 'POST', update: 'POST', destroy: 'POST'
                    }
                }
            });

            var groupProduct = Ext.create('Ext.tree.Panel', {
                store       : storeTree,
                itemId      : 'treeProduct',
                renderTo    : Ext.getBody(),
                name        : 'treeProduct',
                rootVisible : false,
                useArrows   : true,
                layout      :'fit',
                margin      : '0 0 0 0',
                autoScroll  : true,
                height      : 150,
                width       : '93%',
                listeners: 
                {
                    checkchange: function(node, checked, eOpts){
                         node.eachChild(function(n) {
                        node.cascadeBy(function(n){
                            n.set('checked', checked);
                        });
                    });
                    p = node.parentNode;
                    var pChildCheckedCount = 0;
                    p.suspendEvents();
                    p.eachChild(function(c) { 
                        if (c.get('checked')) pChildCheckedCount++; 
                            p.set('checked', !!pChildCheckedCount);
                        });
                    p.resumeEvents();
                    }
                }
            });
            return groupProduct; 
        }

and the listener will show tree panel in createTreePaketExist() . the problem is.. i want show tree panel result without click anything,just show the result when panel is loading.
in my code, the result will show after i put pointer in textareafield. how can it just show without any click, just show when panel loaded? anybody can help me? thanks..

Answer 1

I think this has already been answered in your previous Question .

The issue that you are having here is that your store is dependent on user typed values, so your store can't load until the user has done something.

So you cannot automatically load the store without the values unless you provide default values to load the store with and then it can reload with different data if the user enters new information.

Its difficult to provide an in-depth answer to this without knowing what data the store is working with, how it is filtered based on the user data, what data they can enter or you expect them to enter.