ExtJS 4.x第4の定義とクラスのロード


Windowクラスを定義します.
Ext.define('com.test.loader.Window',{
    title:"loader Window1 Test",
    extend:'Ext.window.Window',
    width:430,
    height:260,
    initComponent:function(){
        this.callParent(arguments);
    }
});


// , com.test.loader.Window
Ext.define('com.test.loader.FormWindow',{
    title:"loader Window1 Test",
    extend:'com.test.loader.Window',
    width:230,
    height:160,
    //items:[],
    constructor: function(cfg) {
        this.initConfig(cfg);
    }
});

テストロード:
jsp:
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>requires LoaderTest1 </title>
        <jsp:include page="../include/ext-core-top.jsp" flush="true">
            <jsp:param value="../" name="basePath" />
        </jsp:include>
        <script type="text/javascript" src="LoaderTest1.js"></script>
        
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

ディレクトリの現在のディレクトリの下のwindowパッケージをロードして、パッケージ名
com.test.loader
Ext.Loader.setConfig({
    enabled:true,
    paths:{}
});
Ext.Loader.setPath('com.test.loader','./window');

Ext.onReady(function(){    
    var win2 = Ext.create('com.test.loader.Window',{
title:'ウィンドウ2コンポーネントテスト'
    })
//comから継承するクラスを作成します.test.loader.Window     Ext.create('com.test.loader.Window',{
title:'非同期ロードコンポーネントテスト'
        items:[{
            xtype:'button',
text:'表示ウィンドウ',
            handler:function(){
                win2.show();
            }
        }]
    }).show();
});