Question

我是这项技术的新手。我正在尝试使用form创建一个窗口.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
 });

如果我正在尝试执行上面的代码片段，我面临两个问题。问题是：

1）未捕获的异常：未启用Ext.Loader，因此无法动态解析依赖项。缺少必需的课程：SearchRegionPan 2）b未定义

我正在努力从这个问题中解脱出来。但我无法成功。如果有人知道我哪里出错或者我需要修改代码从这个问题出来，请帮助我。

先谢谢，瑞木

Answer 1

如何包含文件非常重要。在使用它们之前，必须注意所有定义都已初始化。在您的特定情况下，您应该在脚本中包含来自

的订单

<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关键字非常重要，因为这将省略添加的功能，如构造函数，继承，mixins和插件。~~ （请参阅注释，但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
});

我建议您阅读博文'Countdown to Ext JS 4: Dynamic Loading and New Class System'，其中详细解释了班级系统的工作原理。

Answer 2

最好使用Extjs 4的MVC框架，这将有助于您构建应用程序时，或者您需要一些应用程序将您的应用程序缩小为一个app.min.js文件，以便最终部署你的申请

ExtJS4中的MVC问题

2 个答案: