Migrating ExtJS3 to 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,
开发者_C百科 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
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.
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 new keyword 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.
加载中,请稍侯......
精彩评论