Проблема MVC в ExtJS4 - PullRequest
Новая
       49

Проблема MVC в ExtJS4

0 голосов
/ 09 июня 2011

Я новичок в этой технологии. Я пытаюсь создать одно окно с формой. 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 не определено

Я очень стараюсь решить эту проблему. Но я не могу добиться успеха. Пожалуйста, если кто-то знает, где я ошибся или где мне нужно изменить код, чтобы выйти из этой проблемы, помогите мне.

Заранее спасибо, Рама

Ответы [ 2 ]

1 голос
/ 09 июня 2011

Очень важно, как вы включаете ваши файлы. Вы должны обратить внимание, что все определения инициализируются перед их использованием. В вашем конкретном случае вы должны включить в сценарий заказ от 

<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: динамическая загрузка и новая система классов» , в котором подробно объясняется, как работает система классов.

0 голосов
/ 01 сентября 2011

А также лучше использовать инфраструктуру MVC для Extjs 4, это вам очень поможет, когда дело доходит до построения вашего приложения, иначе вам понадобится какое-то приложение для минимизации вашего приложения в один файл app.min.js для окончательного развертывания вашего приложения.

...