我是ExtJS的新手。由于客户端需要ExtJS3代码，我们需要将其转换为ExtJS4。我正在尝试很多，但它没有显示结果。
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>
<body>
<div id="panel" style="padding:10px"></div>
</body>
</html>
ExtJS代码： searchwindow.js：
Ext.require(['*']);
Ext.onReady(function(){
Ext.QuickTips.init();
var SearchRegionPan = new SearchRegionPan();
//************************* SEARCH TAB **************************************
var searchTab = {
id : 'searchTab',
border : false,
//autoHeight : true,
//title : searchTitle,
items : [SearchRegionPan,
{
xtype:'label',
text:'',
style:'padding:2px 1px 0 40px;font-weight: bold;color: red;text-align: center;',
itemId : 'totallabel'
}],
title : 'Search'
};
//*************************** SCHOOL INFO TAB **********************************
var schoolInfo = {
id : 'schoolInfo',
autoScroll : true,
border : false,
//autoHeight : true,
title : 'School Info'
};
//************************ QUICK SEARCH TAB ***************************************
var quickSearchMainTab = {
layout : 'column',
//columnWidth: 0.5,
xtype : 'panel',
border : false,
//autoHeight : true,
id : 'quickpanelID',
title : 'Quick Search',
bodyStyle : 'background:#f7fbfc;'
};
//***************************** LAYERS ****************************************
var layerss = {
id : "tree",
//title : layersTitle,
title : 'Layers',
xtype : "treepanel",
height : 290,
//showWmsLegend: true,
//model : model
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,
//autoHeight : true,
deferredRender : false,
items : [searchTab, schoolInfo, quickSearchMainTab, layerss]
};
// ***************************** SEARCH MAIN TAB ******************************************
var searchMainTab = {
id : 'searchMainTab',
layout : 'fit',
border : false,
//title : searchInfoTitle,
title : 'Search Info',
items : [tabs]
//autoHeight : true
//iconCls : 's_ico'
};
//********************************** 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',
//autoHeight : true,
width : 350,
//baseCls : 'srcTab',
style : 'padding-top:10px',
frame : false,
items : [searchMainTab],
border : false
});
// *********************************** SEARCH WINDOW *************************************
searchWin = Ext.create('Ext.window.Window',{
title : '<p style="font:1px tahoma,arial,helvetica,sans-serif;color:white"></p>',
//width : 360,
width : 400,
height : 380,
autoHeight : true,
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,
//baseCls : 'searchWin',
//animateTarget : 'searInfo',
resizable : false,
shadow : false,
frame : false,
closeAction : 'hide',
items : [searchTabs],
renderTo : panel //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
});
根据我的知识，我期待新的keyowrd在ExtJS4版本中不起作用。如果有人知道，请告诉我。
先谢谢， 拉穆
答案 0 :(得分：5)
看看这个： http://www.sencha.com/blog/ext-js-3-to-4-migration/
有一个兼容层，希望能够启动并运行您的应用。一旦您有了要查看的内容，就可以更轻松地解决迁移问题。
答案 1 :(得分：2)
是的，我将从兼容层开始，并查看迁移screencasts以获取有关调试兼容性问题的指示。通常，new关键字仍然有效。 Ext.create()在新的类系统下是首选，但似乎你主要是这样做。如果页面没有渲染，那么你将不得不做一些调试来找出问题所在。