ExtJS:全局函数在页面加载之前执行。怎么拖延?

Posted

技术标签:

【中文标题】ExtJS:全局函数在页面加载之前执行。怎么拖延?【英文标题】:ExtJS: Global function executes before page load. How to delay? 【发布时间】:2018-10-18 09:17:38 【问题描述】:

我在panel items 中有一个combobox,并在combobox listeners 中放置了一个select 事件。事件的函数调用一个全局方法,但这个全局函数在页面加载期间执行。

我在几个类上使用了这个组合框选择方法。因此,全局函数将很容易。因此需要在组合框的项目选择期间使用正常行为。我怎样才能实现这种调整?

全局功能:

Ext.define('MyApp.BaseMethods', 
    requires: [],
    singleton: true,

    // Instead of using method content several times; passing comboname and required JSON value on arguments
    comboQuery: function(comboname, JSONValue) 
        var query = Ext.ComponentQuery.query(comboname)[0].getSelectedRecord();
        var requiredValue = query.get(JSONValue);

        return requiredValue;
    ,
);

面板:

Ext.define('MyApp.view.FooPanel', 
     extend: 'Ext.panel.Panel',
     items: [
         xtype: 'foocombo',
         listeners: 
             // Trying to pass required information through parameters
             select: MyApp.BaseMethods.comboQuery('[name=myfoocombo]', 'foojsonvalue'),
             scope: me
         
     ]
 );

运行此方法时;全局函数在页面加载期间运行 button 点击显示 FooPanel 及其项目并给出错误,因为无法选择组合项目。;

Uncaught TypeError: Cannot read property 'getSelectedRecord' of undefined

【问题讨论】:

【参考方案1】:

如何拖延?

不用耽误,只需要换个方式。

当您向select 提供函数时,它将在页面加载或组件创建时调用,因此您需要在select 事件函数内部调用。

我在几个类上使用了这个组合框选择方法。因此,全局函数将很容易。因此需要在组合框的项目选择期间使用正常行为。我怎样才能实现这种调整?

因此,正如您所提到的,我在几个类上使用了这个组合框选择方法,为此,您可以创建一个公共组件,并且您可以轻松地在该公共组件select 事件上获得价值。

例子


    xtype: 'combobox',
    listeners: 
        function: select(combo, record, eOpts) 
            //you can get easily value here
            //record With multiSelect false, the value will be a single record. With multiSelect true, the value will be an array of records.
            record.get('you json name');
        
    

在这个FIDDLE中,我创建了一个演示。希望这将帮助/指导您实现您的要求。

代码片段

Ext.application(
    name: 'Fiddle',

    launch: function () 

        //Common Component
        //I'm using this combobox selection method on several classes.
        Ext.define('foocombo', 
            extend: 'Ext.form.field.ComboBox',
            xtype: 'foocombo',
            store: 
                fields: ['abbr', 'name'],
                data: [
                    "abbr": "AL",
                    "name": "Alabama"
                , 
                    "abbr": "AK",
                    "name": "Alaska"
                , 
                    "abbr": "AZ",
                    "name": "Arizona"
                ]
            ,
            fieldLabel: 'Choose State',
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            JSONValue: 'name',
            listeners: 
                // Trying to pass required information through parameters
                select: function (combo, record) 
                    //As per simple way
                    console.log(record.get('name'));
                    //As per you implement
                    console.log(MyApp.BaseMethods.comboQuery(`[name=$combo.getName()]`, combo.JSONValue))
                
            
        )

        Ext.define('MyApp.BaseMethods', 
            singleton: true,

            // Instead of using method content several times; passing comboname and required JSON value on arguments
            comboQuery: function (comboname, JSONValue) 
                var query = Ext.ComponentQuery.query(comboname)[0];
                if (query) 
                    var rec = query.getSelectedRecord();
                    return rec.get(JSONValue) || null;
                
                return null
            
        );

        Ext.define('MyApp.view.FooPanel', 
            extend: 'Ext.panel.Panel',
            xtype: 'foopanel',
            items: [
                xtype: 'foocombo',
                name: 'myfoocombo'
            ]
        );

        Ext.create(
            xtype: 'foopanel',
            title: 'Demo',
            bodyPadding: 10,
            renderTo: Ext.getBody()
        )
    
);

【讨论】:

亲爱的@N。 Jadhav 这是一个非常明确的解释。非常感谢。

以上是关于ExtJS:全局函数在页面加载之前执行。怎么拖延?的主要内容,如果未能解决你的问题,请参考以下文章

加载 Store 之前的 ExtJS 渲染网格

extjs:加载时如何设置组合框的值

uniapp页面显示时执行

如何在加载之前检查所有数据加载将新行添加到网格中(ExtJS 3.2)

js怎样页面加载之前执行?

jquery怎么判断页面加载完全