0
我是新手這個technology.I我試圖用form.The HTML代碼創建一個窗口：MVC問題
<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的不確定
我想了很多，從這個問題。但出來的是不能夠succeedd.Please，我需要修改代碼從這個問題出來，幫助我。
由於事先 瑞木
非常感謝您的回覆。但是我面臨的一個問題是this.constructor.apply不是一個函數。請讓我知道我出錯的地方。 – ramu 2011-06-09 10:34:03
問題是您正在使用'new'關鍵字。我更新了答案，以便更詳細地瞭解這一點。 – Netzpirat 2011-06-09 11:47:18
@Netzpirat：您關於'new' v/s'Ext.create'的聲明不正確。繼承和mixin在兩者都可以正常工作。唯一的區別是Ext.create將嘗試動態加載類，如果不可用，但是'new'將會失敗。 – 2011-09-02 11:48:29