ExtJS 4 组件化编程中Ext.define与Direct的冲突，问题已解决

问题已解决

和上一篇帖子相同，在Ext.define中不能直接指定Direct的api或者directFn，怀疑与Ext.loder有关

这次的问题更奇怪，把Ext.define和Ext.create放在同一个js文件里面时候没有问题，可以在Ext.define中直接指定Direct的api或者directFn，分成两个文件，一个Ext.define另外一个Ext.create就报错。

以今天做的一个树状图为例：

正确的js：

Ext.onReady(function() {
	Ext.direct.Manager.addProvider(Ext.app.USER_API);

	
	Ext.define('APP.store.Module', {
    extend  : 'Ext.data.TreeStore',
		alias:'widget.FunctionStore',
    autoLoad: true,

    proxy: {
            type: 'direct',
            directFn: MyApp.TestAction.getTree,
            paramOrder: ['node']
        },

    root    : {
        expanded    : true
    }

});
	
    
Ext.define('App.FunctionTree',{
	extend:'Ext.tree.Panel',
	store: Ext.create('APP.store.Module'),
        height: 350,
        width: 600,
        title: 'Tree Sample',
        rootVisible: false,
        renderTo: Ext.getBody()
	
	});


    // create the Tree
    var tree = Ext.create('App.FunctionTree');
});

拆开成两个就报错，无论怎么拆都一样，如下：

	Ext.direct.Manager.addProvider(Ext.app.USER_API);

	
	Ext.define('APP.store.Module', {
    extend  : 'Ext.data.TreeStore',
		alias:'widget.FunctionStore',
    autoLoad: true,

    proxy: {
            type: 'direct',
            directFn: MyApp.TestAction.getTree,
            paramOrder: ['node']
        },

    root    : {
        expanded    : true
    }

});

Ext.onReady(function() {

	
    
Ext.define('App.FunctionTree',{
	extend:'Ext.tree.Panel',
	store: Ext.create('APP.store.Module'),
        height: 350,
        width: 600,
        title: 'Tree Sample',
        rootVisible: false,
        renderTo: Ext.getBody()
	
	});


    // create the Tree
    var tree = Ext.create('App.FunctionTree');
});

问题已经解决，原来是ext动态加载的问题，解决方法如下：

1、取消对树状图相关js的引用，改为动态加载

2、修改js代码如下：

	Ext.direct.Manager.addProvider(Ext.app.USER_API);
	Ext.define('App.FunctionTree.Store', {
    extend: 'Ext.data.TreeStore',
		alias:'widget.FunctionStore',
    autoLoad: true,
    proxy:{
            type: 'direct',
            directFn: MyApp.TestAction.getTree,
            paramOrder: ['node']
        },
    root:{
        expanded    : true
    }
});

Ext.define('App.FunctionTree',{
	extend:'Ext.tree.Panel',
	store: Ext.create('App.FunctionTree.Store'),
        height: 350,
        width: 600,
        title: 'Tree Sample',
        rootVisible: false,
        renderTo: Ext.getBody()
	
	});

注意看这里的动态加载：

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('App', 'js');
Ext.require('App.FunctionTree');
Ext.onReady(function() {
    var tree = Ext.create('App.FunctionTree');
});