Autoload Panel Listener ExtJs

时间:2015-02-03 01:45:13

标签: javascript extjs extjs4 listener

我在extjs中使用监听器代码查看文件,这里是:

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; 
        }

并且监听器将在createTreePaketExist()中显示树状面板。问题是..我想要显示树面板结果而不点击任何东西,只需在面板加载时显示结果。
在我的代码中,结果将在我将指针放在textareafield中后显示。如何只显示没有任何点击,只显示面板加载?有人可以帮帮我吗?感谢..

1 个答案:

答案 0 :(得分:0)

我认为您之前的Question已经回答了这个问题。

您在这里遇到的问题是您的商店依赖于用户输入的值,因此您的商店无法加载,直到用户完成某项操作为止。

因此,除非您提供默认值以加载商店,否则无法自动加载没有值的商店,如果用户输入新信息,则可以使用不同的数据重新加载。

很难在不知道商店使用什么数据,如何根据用户数据进行过滤,他们可以输入什么数据或者您希望他们进入的数据的情况下提供深入的答案。