PDA

View Full Version : HTML Form Migration Ext 2 to Ext 3 Error



dr1811
1 Dec 2009, 3:14 AM
Hi,

I am new to Ext and I am upgrading an application from Ext 2.3.0 to Ext 3.0.3. I have several search form menus within a toolbar and I have hit a snag. FB error is c.el.up("li.x-menu-list-item", 5) is null. I have attached a screen shot from each version below.

Ext 2 working version:




<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '/ext2/resources/images/default/s.gif';

Ext.onReady(function(){

Ext.QuickTips.init();

var tMenu = new Ext.menu.Menu({id:'tMenu', plain:true});
var tMenuItem = new Ext.menu.BaseItem({applyTo: 'tPnl', id: 'tPnl',hideOnClick:false});
tMenuItem.rendered = false;
tMenu.addItem(tMenuItem);

var tb = new Ext.Toolbar({
renderTo:'toolbar'
});

tb.add({
text:'Menu-Form-1',
tooltip: {
text:'Menu-Form-Text-1',
title:'Menu-Form-Title-1',
autoHide:true
},
iconCls: 'bmenu',
autoHide:true,
menu: tMenu
});

});

</script>
</head>
<div id="container">
<div id="toolbar"></div>
<div style="display: none;">
<div id="tPnl" style="padding:10px; width:180px; height:100px">
<div class="TextBold">
<div id="yndiv">
<select id="yn" name="YN" size="1" class="Text">
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
</div>
</div>
<div class="TextBold" style="text-align: center;"><BR />
<input type="button" value="Search" class="submit" />
<input type="button" value="Clear" class="submit" />
<input type="button" value="Close" class="submit" />
</div>
</div>
</div>



Ext 3 broke version:



<script type="text/javascript">

Ext.BLANK_IMAGE_URL = '/ext3/resources/images/default/s.gif';

Ext.onReady(function(){

Ext.QuickTips.init();

var tMenu = new Ext.menu.Menu({id:'tMenu', plain:true});
var tMenuItem = new Ext.menu.BaseItem({applyTo: 'tPnl', id: 'tPnl',hideOnClick:false});
tMenuItem.rendered = false;
tMenu.addItem(tMenuItem);

tb.add({
text:'Menu-Form-1',
tooltip: {
text:'Menu-Form-Text-1',
title:'Menu-Form-Title-1',
autoHide:true
},
iconCls: 'bmenu',
autoHide:true,
menu: tMenu
});

tb.doLayout();

});

</script>
</head>
<div id="container">
<div id="toolbar"></div>
<div style="display: none;">
<div id="tPnl" style="padding:10px; width:180px; height:130px">
<div class="TextBold">
<div id="yndiv">
<select id="yn" name="YN" size="1" class="Text">
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
</div>
</div>
<div class="TextBold" style="text-align: center;"><BR />
<input type="button" value="Search" class="submit" />
<input type="button" value="Clear" class="submit" />
<input type="button" value="Close" class="submit" />
</div>
</div>
</div>



Any pointers would be much appreciated.