extjs - ExtJS4 での MVC の問題

Question

私はこのテクノロジーの初心者です。フォームを使用して 1 つのウィンドウを作成しようとしています。Html コードは次のとおりです。

<html>
 <head>
 <title>Search Window With Ext JS 4</title>
 <link rel="stylesheet" type="text/css" href="ext-4.0.1/resources/css/ext-all.css"/>
 <script type="text/javascript" src="ext-4.0.1/ext-all.js"></script>
 <script type="text/javascript" src="ext-4.0.1/bootstrap.js"></script>

<script type="text/javascript" src="searchwindow.js"></script>
 <script type="text/javascript" src="SearchRegionPan.js"></script>
 </head>

<body id="hello">
 </body>
 </html>

searchwindow.js:

Ext.require(['*']);

Ext.onReady(function(){

Ext.QuickTips.init();

 var searchRegionPan = new SearchRegionPan();

 //*************** SEARCH TAB *******************  
 var searchTab = {    
 id : 'searchTab',   
 border : false,    
 items : [searchRegionPan],    
 title : 'Search'    
 };

//*********** SCHOOL INFO TAB ***************    
 var schoolInfo = {       
 id : 'schoolInfo',          
 autoScroll : true,         
 border : false,      
 title : 'School Info'       
 };

//***************** QUICK SEARCH TAB **********************           
 var quickSearchMainTab = {           
 layout : 'column',         
 xtype : 'panel',         
 border : false,         
 id : 'quickpanelID',         
title : 'Quick Search',            
bodyStyle : 'background:#f7fbfc;'              
 };

//****************** GET ROUTE *******************               
 var getRoute = {                  
 id : 'getRoute',       
 layout : 'fit',           
 border : false,            
 title : 'Get Route',                 
 style : 'padding-bottom:10px'                      
};

//******************* LAYERS **********************     
 var layerss = {              
 id : "tree",                      
 title : 'Layers',             
 xtype : "treepanel",            
 height : 290,                        
enableDD : true                 
 }; 

//****************** TABS IN SEARCH MAIN TAB *******************      
 var tabs = {               
 margins : '3 3 3 0',                    
 activeTab : 0,                     
 style : 'background:none; padding-top:10px',              
 plain : true,            
 xtype : 'tabpanel',           
 id : 'tabs',             
 frame : false,            
 border : false,                
 deferredRender : false,               
 items : [searchTab, schoolInfo, quickSearchMainTab, getRoute, layerss]             
 };

// **************** SEARCH MAIN TAB *************************
 var searchMainTab = {
 id : 'searchMainTab',
 layout : 'fit',
 border : false,
 title : 'Search Info',
 items : [tabs] 
}; 

// ****************** REPORTS *********************
 var reports = {
 id : 'reports',
 layout : 'fit',
 border : false,
 title : 'Reports'
 };

//********** searchTabs USED IN SEARCH WINDOW *********** 
searchTabs = Ext.create('Ext.tab.Panel',{
 margin : '3 3 3 0',
 activeTab : 0,
 style : 'background:none',
 plain : true,
 id : 'searchTabs',
 width : 350,
 style : 'padding-top:10px',
 frame : false,
 items : [searchMainTab,reports],
 border : false 
});

// *************** SEARCH WINDOW *********************
 var searchWin = Ext.create('Ext.window.Window',{
 title : 'Search Window',
 width : 400,
 height : 380,
 x : 100, //to display search window 100px from left
 y : 100, //to display search window 100px from top
 draggable : true,
 autoScroll : false,
 plain : true,
 id : 'searchMainWindow',
 layout : 'fit',
 border : true,
 resizable : false,
 shadow : false,
 frame : false,
 closeAction : 'hide',
 items : [searchTabs],
 renderTo : hello //used to render to html page
 });
 searchWin.show();
 }); 


SearchRegionPan.js:

Ext.require('*');

//************ SEARCH REGION PAN USED IN SEARCH TAB **********
 SearchRegionPan = Ext.create('Ext.Panel',{
 id : 'searchRegionPan',
 border : false, 
style : 'padding:5px 10px 0 10px ',
 items : [RegionCityDistForm],
 frame : false
 });

//********* REGIONCITYDISTFORM USED IN SEARCH TAB **************
 var RegionCityDistForm = Ext.create('Ext.form.Panel',{
 extend : 'Ext.panel.Panel',
 id : 'regioncitydistform',
 frame : true,
 border : true,
 height : 100,
 padding : '10px 20px 10px 10px',
 width : '100%',
 layout : 'anchor',
 fieldDefaults : {
 labelWidth : 140
 },
 items : [Region,City,District]
 });

//********** REGION DECLARATION ***************
 var Region = Ext.create('Ext.form.TextField',{
 fieldLabel : 'Region',
 selectOnFocus : true,
 width : 330,
 allowBlank : false,
 editable : true,
 emptyText : 'Select a Region...',
 triggerAction : 'all',
 typeAhead : true
 });
 //********** CITY DECLARATION **************
 var City = Ext.create('Ext.form.TextField',{
 fieldLabel : 'City',
 selectOnFocus : true,
 width : 330,
 allowBlank : false,
 editable : true,
 emptyText : 'Select a City...',
 triggerAction : 'all',
 typeAhead : true
 });

//************** DISTRICT DECLARATION ******************
 var District = Ext.create('Ext.form.TextField',{
 fieldLabel : 'District',
 selectOnFocus : true,
 width : 330,
 allowBlank : false,
 editable : true,
 emptyText : 'Select a District...',
 triggerAction : 'all',
 typeAhead : true
 });

上記のコードスニペットを実行しようとすると、次の 2 つの問題に直面します。

1) キャッチされない例外: Ext.Loader が有効になっていないため、依存関係を動的に解決できません。必要なクラスがありません: SearchRegionPan 2) b は定義されていません

私はこの問題から抜け出すために多くのことを試みています.しかし、成功することはできません.私がどこで間違ったのか、またはこの問題から抜け出すためにコードを変更する必要がある場所を誰かが知っているなら、私を助けてください.

前もってありがとう、ramu

score 1 · Accepted Answer

ファイルをどのように含めるかは非常に重要です。すべての定義は、使用する前に初期化されることに注意する必要があります。特定のケースでは、スクリプトに次の順序を含める必要があります

<script type="text/javascript" src="searchwindow.js"></script>
<script type="text/javascript" src="SearchRegionPan.js"></script>

に

<script type="text/javascript" src="SearchRegionPan.js"></script>
<script type="text/javascript" src="searchwindow.js"></script>

これにより、インスタンス化を試みる前にクラス SearchRegionPan が確実に作成されます。

クラスシステム機能を使用する場合は、絶対にキーワードを使用しないことが非常に重要です。これにより、newコンストラクター、継承、ミックスイン、プラグインなどの追加機能が省略されるためです。(コメントを参照してください。ただし、Ext JS ドキュメントでは、常に Ext.create を使用することをお勧めしています)。

したがって

var searchRegionPan = new SearchRegionPan();

となります

var searchRegionPan = Ext.create('SearchRegionPan');

そしてあなたのクラス定義

SearchRegionPan = Ext.create('Ext.Panel', {
  id : 'searchRegionPan',
  border : false, 
  style : 'padding:5px 10px 0 10px ',
  items : [RegionCityDistForm],
  frame : false
});

となります

Ext.define('SearchRegionPan', {
  extend: 'Ext.Panel'
  id : 'searchRegionPan',
  border : false, 
  style : 'padding:5px 10px 0 10px ',
  items : [RegionCityDistForm],
  frame : false
});

クラスシステムがどのように機能するかを詳しく説明しているブログ投稿「Ext JS 4 へのカウントダウン: 動的読み込みと新しいクラスシステム」を読むことをお勧めします。

score 0 · Accepted Answer

また、Extjs 4 の MVC フレームワークを使用することをお勧めします。これは、アプリケーションのビルドに関して非常に役立ちます。そうしないと、アプリケーションapp.min.jsの最終的な展開のために、アプリケーションを 1 つのファイルに縮小するためのアプリケーションが必要になります。

extjs - ExtJS4 での MVC の問題

2 に答える 2

Related

Reference