Javascript ExtJs 监听器

ExtJs listeners

提问by Alex

I want to get an onload event working on my config object.

我想在我的配置对象上运行一个 onload 事件。

The following works, except when I create a

以下工作，除非我创建一个

config.listeners={..}

(I think that's what I need?) to replace

（我认为这就是我需要的？）替换

this.onload({...});

Am I even using the right config? (I generally have no clue about event handling)

我什至使用了正确的配置吗？（我通常对事件处理一无所知）

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();

回答by Molecular Man

In ExtJS events are managed by using two ways:

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

Firstly, You can add in your config listenersobject:

首先，您可以添加配置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();

Secondly, you can use onmethod:

其次，您可以使用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();

回答by Joseph Lust

To add to Molecule's first answer, which I use frequently in my enterprise apps, because it is more succinct and easier to read.

添加到 Molecule 的第一个答案中，我在我的企业应用程序中经常使用它，因为它更简洁易读。

It is often easier to use a Bus to pass messages around your app.

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

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

Then in your application use the following to fire to the bus:

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

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

And where you want to listen for the event:

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

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

回答by Lionel Chan

A few thing before introducing my way of coding:

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

1. Usually I don't assign idto Ext Objects, as it's a bad practice. We only need ids in very rare cases, and unless there is absolutely no way to access an object without using an id(I can't think of a reason).
2. You are wrong about "You can't have a store without a model". Using Modelis a good practice, but you can always define one Storewithout a model, and it will help you to create one automatically.
3. If you have default values, it'll be good to put it in the class properties.
4. More like for consistencies, we end a line with comma, not start with comma.

1. 通常我不会分配id给 Ext Objects，因为这是一种不好的做法。我们只id在极少数情况下才需要s，除非绝对没有办法在不使用 an 的情况下访问对象id（我想不出原因）。
2. 你错了“没有模特就没有商店”。使用Model是一种很好的做法，但您始终可以在Store没有模型的情况下定义一个，它会帮助您自动创建一个。
3. 如果您有默认值，最好将其放在类属性中。
4. 更像是为了一致性，我们以逗号结束一行，而不是以逗号开头。

So to clean your code up a bit, I came out with this piece of code (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'
});

Event handling in ExtJS is very well defined and structured. You can always visit this pageto know more about Event Handling.

ExtJS 中的事件处理定义和结构非常好。您可以随时访问此页面以了解有关事件处理的更多信息。

If you are unsure how to code ExtJS, you can always look at their source code and learn from experts.

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

Extra Note

额外注意

The this.load(..you mentioned in your code is in fact a method defined in Ext.data.Store, which asks the Storeto execute the loadaction, and on success, the Storewill load callbackthat you have specified. I think this is not the loadevent that you have mentioned.

在this.load(..您的代码中提到的其实是在定义的方法Ext.data.Store，它要求Store执行load行动，并且成功时，Store会加载callback您所指定。我想这不是load你提到的事件。

Good luck and cheers!

祝你好运和欢呼！

回答by Viet Drake

Be sure to attach events when components have been rendered. My solution overides the initEvents()function of components

确保在呈现组件时附加事件。我的解决方案覆盖了initEvents()组件的功能

Ext.define('MyApp.grid.MyGrid', {
  extend: 'Ext.grid.Panel',
  initEvents: function() {
    // attach events here
    this.callParent(arguments)
  }
});