Access an html element that has been loaded to panel
Access an html element that has been loaded to panel
Hi guys,
I am new to Ext JS nad I have a problem. I am using load method from panel class to load an html file into a panel. Then I need to get a reference to the button which exists on the html form. But no matter what method I use(Ext.get, panel.findById, ...), I cannot get any rference and all methods return null. Anyone has any idea? here is the code:
this is the html which is being loaded:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<linkrel="stylesheet"type="text/css"href="../../resources/css/ext-all.css"/>
<!-- GC -->
<!-- LIBS -->
<scripttype="text/javascript"src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<scripttype="text/javascript"src="../../ext-all.js"></script>
<scriptlanguage="javascript"src="hello.js"></script>
<!-- Common Styles for the examples -->
<linkrel="stylesheet"type="text/css"href="../examples.css"/>
<styletype="text/css">
.x-panel-bodyp {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<scripttype="text/javascript"src="../examples.js"></script><!-- EXAMPLES -->
<h1>Hello World Window</h1>
<inputtype="button"id="show-btn"value="Hello World"/><br/><br/>
</body>
</html>
and this is script source:
Ext.onReady(function(){var p = new Ext.Panel({
title: 'My Panel',
collapsible:true,
renderTo: 'script',
width:400
});
p.load('hello.html'); // the file above
var btn = Ext.get('show-btn'); // Always return null, but show-btn is the id of a button which exists in source of hello.html which is loaded here.
debugger});
even if i only load the button, when i try to get it using Ext.get('btnID'), it returns null.
My question is how can you get a reference to an object that you have loaded into a panel using load method.
Originally Posted by evant
You can't load a whole HTML page inside a panel, otherwise the whole page because invalid.
even if i only load the button, when i try to get it using Ext.get('btnID'), it returns null.
My question is how can you get a reference to an object that you have loaded into a panel using load method.
Access an html element that has been loaded to panel
Originally Posted by evant
Reply With Quote