将 ExtJS3 迁移到 ExtJS4
我是 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 版本中不起作用。如果有人知道，请告诉我。
提前致谢， 瑞木
I am newbie to ExtJS. As client requirement ExtJS3 code is there we need to convert it into ExtJS4.I am trying a lot but it is not displaying result.
Html code:
<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 code:
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
});
As per my Knowledge i am expecting that new keyowrd is not working in ExtJS4 version.If anyone knows please let me know.
Thanks in Advance,
Ramu
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
看看这个：
http://www.sencha.com/blog/ext- js-3-to-4-migration/
有一个兼容层，希望能让您的应用程序启动并运行。一旦您有了可看的内容，解决您的迁移问题就会更容易。
Take a look at this:
http://www.sencha.com/blog/ext-js-3-to-4-migration/
There is a compatibility layer, that hopefully will get your app up and running. Once you have something to look at, it will be easier to address your migration issues.
是的，我将从兼容性层开始，并查看迁移截屏以获取有关调试兼容性问题的指导。一般来说，
new关键字仍然可以正常工作。Ext.create()在新的类系统下是首选，但看起来你主要是这样做的。如果页面未呈现，则您必须进行一些调试才能找出问题所在。Yeah, I would start off with the compatibility layer and also check out the migration screencasts for pointers on debugging compatibility issues. In general the
newkeyword still works OK.Ext.create()is preferred under the new class system, but it seems like you are mostly doing that. If the page is not rendering, then you'll have to do a little debugging to figure out what the issue is.