ExtJS 4 组件化编程，动态加载，面向对象，Direct结合成功，目前为止我的最佳实践

ExtJS4中支持组件化编程和Direct，官方实例中分别提供了两种技术的示例，但没有两种方式结合的例子，经多次测试，由于4.0中存在的bug（暂时这么认为，也许是我水平烂），两种方式结合会产生一系列问题，在静态加载、动态加载、Direct结合的过程中（尤其是采用Direct的时候，用url不会出错），经常性的报错。

官方论坛也没有相关资料，中文也没找到。

分析2天源代码+调试+测试各种结合方式（new/define/create/各参数调节），终于找到一个稳定运行的实现方式，也很好的体现了面向对象及组件化编程的思想。示例如下，相关解释卸载注释中，注意此示例必须结合ExtJS4运行。

代码如下：

1、html页（关键部分代码）

    <!--加载ExtJS的CSS和js，也可以只加载核心包，然后按照提示加载需要的js（未测试）-->
 2     <!--其他js全部使用动态加载，在head部分不需要引用js-->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
     <link rel="stylesheet" type="text/css" href="css/application.css" />
     <script src="ext/ext-all.js" type="text/javascript"></script>
     <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>
     <!--本例中使用.Net，此处加载Direct的Api-->
    <script src="Api.ashx" type="text/javascript"></script>
      <script type="text/javascript">
        //以下设置必须在Ext.onReady之前
         //动态配置打开
         Ext.Loader.setConfig({enabled: true});
        //设置组件路径
     Ext.Loader.setPath('App', 'js');
    //加载MainViewport组件，注意MainViewport里面需要的js不需要在此加载，在MainViewport的define中用requires参数定义就可以，其他组件类似
     //每种组件只需要考虑自己的require即可
     Ext.require([
        'App.MainViewport'
    ]);
    //加入Direct的Provider
     Ext.direct.Manager.addProvider(Ext.app.USER_API);
    Ext.onReady(function () {
        Ext.QuickTips.init();
        Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
        //舍弃new函数，改用Ext.create
         Ext.create(App.MainViewport);
        setTimeout(function () {
              Ext.get('loading').remove();
              Ext.get('loading-mask').fadeOut({ remove: true });
              Ext.getCmp('MainLicense').collapse();
          }, 250);
    });
    </script>

2、MainViewport.js（定义App.MainViewport类，由于指定了路径，这个js文件必须放在js目录下，而且文件名称必须是MainViewport.js，否则无法加载）

//组件名称、js路径、js文件名必须匹配
 Ext.define('App.MainViewport',{
    //加载MainViewport内的各组件
    requires:['App.MainFunctionPanel','App.Banner','App.Licence'],
    extend:'Ext.Viewport',
  layout: 'border',
  items: [
  //使用xtype定义items，利用id和Ext.getCmp获取相应的对象，或者通过itemId和getComponent()获取对象，注意scope的不同
  {xtype: 'Banner',itemId: 'MainBanner',region: 'north',margins: '0 0 0 5'},
  {xtype: 'Licence',id: 'MainLicense',region: 'south',margins: '0 0 0 0',contentEl: 'south'}, 
  {xtype:'MainFunctionPanel',region: 'west'},
  //也可以使用Ext.create创建对象，但不要使用new
  Ext.create('Ext.tab.Panel', {
      region: 'center',
      id:'mainTabPanel',
      deferredRender: false,
      activeTab: 0,
      items: [{
              id:'mainFilePanel',
          title: '文件浏览',
          autoScroll: true,
          listeners: {
                activate: function () { Ext.getCmp('mainFunctionFile').expand() }
            }
      },{
              id:'mainSearchPanel',
          title: '文件查找',
          autoScroll: true,
          listeners: {
                activate: function () { Ext.getCmp('mainFunctionSearch').expand() }
            }
      }]
  })]
});

3、App.MainFunctionPanel类，放置的位置参照以上

//MainFunctionPanel类，继承Ext.Panel
Ext.define('App.MainFunctionPanel',{
        extend:'Ext.Panel',
        requires:'App.MainFunctionTree',
        alias:'widget.MainFunctionPanel',
    title: '功能选择',
    split: true,
    width: 200,
    minWidth: 175,
    maxWidth: 400,
    collapsible: true,
    animCollapse: true,
    margins: '0 0 0 5',
    layout: 'accordion',
    items: [
    {
            xtype:'FunctionTree',
            title: '文件浏览',
            id:'mainFunctionFile',
        iconCls: 'nav', // see the HEAD section for style used
        listeners: {
            //beforerender: function () { alert('beforerender'); },
            //beforecollapse: function () { alert('beforecollapse'); },
            //beforeexpand: function () { alert('beforeexpand'); },
            expand: function () { Ext.getCmp('mainTabPanel').setActiveTab(Ext.getCmp('mainFilePanel')); }
        }
    }, {
        title: '文件查找',
        id:'mainFunctionSearch',
        html: '<p>Some settings in here.</p>',
        iconCls: 'settings',
        listeners: {
            //beforerender: function () { alert('beforerender'); },
            //beforecollapse: function () { alert('beforecollapse'); },
            //beforeexpand: function () { alert('beforeexpand'); },
            expand: function () { Ext.getCmp('mainTabPanel').setActiveTab(Ext.getCmp('mainSearchPanel')); }
        }
    }, {
        title: '系统管理',
        id:'mainFunctionAdmin',
        html: '<p>Some info in here.</p>',
        iconCls: 'info',
        listeners: {
            //beforerender: function () { alert('beforerender'); },
            //beforecollapse: function () { alert('beforecollapse'); },
            //beforeexpand: function () { alert('beforeexpand'); },
            expand: function () { Ext.MessageBox.alert('消息', '系统管理展开了！'); }
        }
    }]
});

4、App.MainFunctionTree

Ext.define('FunctionTreeStore', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,
    proxy:{
            type: 'direct',
            //设置Direct服务函数
            directFn: MyApp.TestAction.getTree,
            paramOrder: ['node']
        },
    root:{
        expanded    : true
    }
});
Ext.define('App.MainFunctionTree',{
    extend:'Ext.tree.Panel',
    alias:'widget.FunctionTree',
    store: Ext.create('FunctionTreeStore'),
        height: 350,
        width: 600,
        rootVisible: false
    
    });

服务器Direct照以往的写就ok，利用DirectHandler.Configure(DirectProvider provider, IEnumerable<object> items)加载相应的服务Class

5、Api.ashx

<%@ WebHandler Language="C#" Class="Api" %>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Direct;

public class Api : DirectHandler
{

    public override string ProviderName
    {
        get
        {
            return "Ext.app.USER_API";
        }
    }

    public override string Namespace
    {
        get
        {
            return "MyApp";
        }
    }

    protected override void ConfigureProvider(DirectProvider provider)
    {
        this.Configure(provider, new object[] { new CheckLogin(),new TestAction() });
    }

}

6、随手写的生成树状图的cs，怎一个烂字了得……

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ext.Direct;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Web.SessionState;
using System.Web.Security;

/// <summary>
///CheckLogin 的摘要说明
/// </summary>
[DirectAction]
public class TestAction
{

    [DirectMethod]
    public JArray getTree(string id)
    {
        JArray data = new JArray();
        
            data.Add(new JObject(
                new JProperty("id", id+id),
                new JProperty("text", "tes"),
                new JProperty("leaf", false)
            ));
        

        return data;
    }
}

经测试，以上组合方式可以正常运行，应用组件化编程和面向对象技术可以使思路更加清晰，使用动态加载可以提高访问速度，使用Direct可以达到MVC的效果。

接下来将使用这些技术制作一个完整的例子，欢迎讨论，欢迎拍砖