我想在我的配置对象上运行一个onload事件。
以下作品，除非我创建
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();
答案 0 :(得分：20)
在ExtJS事件中，使用两种方式管理事件：
首先，您可以添加config 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();
答案 1 :(得分：4)
添加Molecule的第一个答案，我经常在我的企业应用中使用它，因为它更简洁，更易于阅读。
使用总线在您的应用中传递消息通常更容易。
myApp.Bus = new Ext.util.Observable();
myApp.Bus.addEvents(
'myCustomEvent'
);
然后在您的应用程序中使用以下内容触发总线：
myApp.Bus.fireEvent( 'myCustomEvent', {someData: value} );
你想听的事件在哪里：
... // config
myObj.on('myCustomEvent', function(someData) { doSomething(); }, this);
答案 2 :(得分：3)
在介绍我的编码方式之前的一些事情：
id分配给Ext Objects，因为这是一个不好的做法。在非常罕见的情况下我们只需要id，除非绝对无法在不使用id的情况下访问对象（我无法想到原因）。Model是一种很好的做法，但您可以在没有模型的情况下定义一个Store，它可以帮助您自动创建一个。{/ li>
为了清理你的代码，我拿出了这段代码（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代码，您可以随时查看其源代码并向专家学习。
额外注意
您在代码中提到的this.load(..实际上是Ext.data.Store中定义的方法，要求Store执行load操作，并且在成功时， Store将加载您指定的callback。我认为这不是您提到的load事件。
答案 3 :(得分：0)
确保在渲染组件时附加事件。
我的解决方案会覆盖组件的initEvents()功能
Ext.define('MyApp.grid.MyGrid', {
extend: 'Ext.grid.Panel',
initEvents: function() {
// attach events here
this.callParent(arguments)
}
});