1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    captainsina is on a distinguished road

      0  

    Question 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});

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,997
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You can't load a whole HTML page inside a panel, otherwise the whole page because invalid.

    You can only load a DOM fragment.

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    captainsina is on a distinguished road

      0  

    Default loading html

    loading html


    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.



    Quote Originally Posted by evant View Post
    You can't load a whole HTML page inside a panel, otherwise the whole page because invalid.

    You can only load a DOM fragment.

  4. #4
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    captainsina is on a distinguished road

      0  

    Default loading html to panel

    loading html to panel


    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.

Thread Participants: 1