ExtJs监听器

Question

我想让onload事件在我的config对象上工作。

下面的代码是有效的，除非我创建了

config.listeners={..}

(我想这就是我需要的？)替换

this.onload({...});

我是否使用了正确的配置？(我通常对事件处理一无所知)

Ext.define('data.SimpleStore', {
extend: 'Ext.data.Store'
,constructor: function (config) {

    config.url=config.url||"afsud"; //If no call, we assume that url has been passed. Pass neither and be shot
    config.id=config.url+'Store';//call should be unique, else its another set of headaches. 
    //console.log(config);
    Ext.define(config.id+'M', { //for a painful reason, you cant have a store without a model
        extend: 'Ext.data.Model',
        fields: []//we figure these out anyways
    });
    config.root=config.root||'data';
    config.type=config.type||'json';
    config.proxy= config.proxy||{ //note if we override our proxy, then server.php might not work as black magic
        type: 'ajax'
        ,url : config.url
        ,reader: {
             type: config.type//seriously if you want to change this, go away
            ,root: config.root//we assume. 
        }
    };
    config.model=config.id+'M';//model should match store anyway. Generic models are out of scope atm
    config.listeners={
        //this.populateFields //Error'd
    };
    this.callParent([config]);
    this.load({//This works, but its after the parent call, so not exactly what i want
        callback: function(records,operation,success){
            var obj=Ext.decode(operation.response.responseText);     
            this.add(obj[config.root]);
            console.log(this.getRange());
            console.log(config);
        }
    });
}
,populateFields:function(){
    console.log('ran'); // never happens
}
});

var s=   Ext.create('data.Store',{url:'test.php'});
s.load();

Answer 1

在ExtJS中，事件通过两种方式进行管理：

首先，您可以在您的配置listeners对象中添加：

var s = Ext.create('data.SimpleStore',{
  url:'test.php',
  listeners: {
    'load': function(store, records, successful,operation, options) {
      //Here you are handling onload event
    }
  } //Don't forget to close all code blocks
});
s.load();

其次，您可以使用on方法：

var s = Ext.create('data.SimpleStore',{url:'test.php'});
s.on('load', function(store, records, successful,operation, options) {
  //Here you are handling onload event
});
s.load();

Answer 2

为了补充分子的第一个答案，我经常在我的企业应用程序中使用，因为它更简洁，更容易阅读。

使用总线在您的应用程序中传递消息通常更容易。

myApp.Bus = new Ext.util.Observable();
myApp.Bus.addEvents(
    'myCustomEvent'
);

然后，在您的应用程序中使用以下命令来触发总线：

myApp.Bus.fireEvent( 'myCustomEvent', {someData: value} );

以及您想要监听事件的位置：

... // config
myObj.on('myCustomEvent', function(someData) { doSomething(); }, this);

Answer 3

在介绍我的编码方法之前，有几件事：

通常我不会将id赋值给对象，因为这是一个糟糕的做法。我们只有在极少数情况下才需要ids，除非绝对没有办法在不使用id的情况下访问对象(我想不出一个理由)。

1. 你对“没有模型就不能有商店”的看法是错误的。使用Model是一种很好的做法，但您始终可以在没有模型的情况下定义一个Store，它将帮助您创建一个properties.
2. More。如果您有默认值，最好将其放在类Model中。为了保持一致性，我们以逗号结束一行，而不是以逗号开头。

所以为了让你的代码更整洁一些，我给出了这段代码(demo of this code)：

/**
 * First, you might need to describe what is your class about.
 * 
 * So this is the SimpleStore of my App bla bla..
 * 
 * Also take note that "data" is a bit too generic to be a Namespace. Try
 * something else. Namespace always defined in CamelCase.
 */
Ext.define('MyApp.data.SimpleStore', {

    extend: 'Ext.data.Store',

    /**
     * We often define those 'default' variables in this section.
     * One thing is to make it more 'ext' like.
     */

    /**
     * @cfg {string} url
     * Description...
     */
    url: 'afsud',

    /**
     * @cfg {string} root
     * Description..
     */
    root: 'data',

    /**
     * @cfg {string} type
     * Description...
     */
    type: 'json',

    /**
     * @cfg {boolean} autoLoad
     * We make autoload = true here, so we can
     * always have the store loaded on initialization
     */
    autoLoad: true,

    /**
     * Creates the Store
     * @param {Object} cfg
     */
    constructor: function(cfg) {

        //Since ExtJS4, we often use variable 'me' to refer 'this'.

        //Thou in this case we didn't use much of 'me', but it's much
        //cleaner than 'this' yeh?
        var me = this;

        //Simply override everything here, no special logic required.
        Ext.apply(me, cfg || {});

        me.proxy = {
            type: 'ajax',
            url: me.url,
            reader: {
                type: me.type,
                root: me.root
            }
        };

        me.callParent(arguments);

        //Then we add our events
        /**
         * In ExtJS, we always add events after a constructor has been called,
         * or after initComponent has been called. We then add the events by using
         * this method.
         * 
         * The .on method is defined in Ext.util.Observable. Observable is a class
         * inherited by almost everything in ExtJS. It's also a nice class
         * to base from if you write your own stuff which supports Event Management.
         * 
         * .on is the shorthand for addListener, and .un is its opposite.
         * 
         * We add an handler to the load event, with the handler defined as me.onLoad,
         * and scoped to this object.
         */
        me.on('load', me.onStoreLoad, me);

        me.on('beforeload', me.onBeforeLoad, me);
    },

    /**
     * This is optinal, purely just to show you the code is running
     */
    onBeforeLoad: function(st) {
        alert('Store is trying to retrieve data from '+st.url);
    },

    /**
     * Handling the load event..
     * 
     * @param {Ext.data.Store} st The store
     * @param {Array} records An array of records
     */
    onStoreLoad: function(st, records) {
        if (!records) alert('And it seems like we cannot reach '+st.url);
    }
});

//Then later in your code, you call your store.
//Remember that we set autoLoad:true, so you don't need to call
//s.load() again.
var s = Ext.create('MyApp.data.SimpleStore', {
    url: 'test.php'
});

ExtJS中的事件处理定义得很好，结构也很好。您可以随时通过visit this page了解有关事件处理的更多信息。

如果您不确定如何编写ExtJS，您可以随时查看其源代码并向专家学习。

Extra Note

您在代码中提到的this.load(..实际上是在Ext.data.Store中定义的方法，它要求Store执行load操作，如果成功，Store将加载您指定的callback。我想这不是你提到的load事件。

祝你好运，干杯！