MVC problem in ExtJS4_问答_开发者_运维开发者技术经验分享

I am newbie to this technology.I am trying to create one window with form.The Html code is:

<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
 });

If i am trying to execute the above code snippet, i am facing two issues.The issues are:

1) uncaught exception: Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: SearchRegionPan 2) b is undefined

I am trying a lot to come out from this issues.But am not able to succeedd.Please if anyone knows where i went wrong or where i need to modify code to come out from this issue,help me.

Thanks in Advance, ramu

It is very important how you include your files. You have to pay attention that all definitions are initialized before you use them. In your specific case you should the script include order from

<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>

This makes sure that the class SearchRegionPan gets created before you try to instantiate it.

It is very important that you never, ever use the new keyword when using the class system functionality, because this will omit the added functionality like constructors, inheritance, mixins and plugins. (See comments, however the Ext JS docs recommend to always use Ext.create).

Thus

var searchRegionPan = new SearchRegionPan();

will become

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

and your class definition

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

will become

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

I recommend you to read the blog post 'Countdown to Ext JS 4: Dynamic Loading and New Class System', which explains how the class system works in detail.

And also its better to use the MVC framework for Extjs 4 this will help you alot when its comes to building your application or else you will need some application for minifying your application into one app.min.js file for final deployment of your application