I just realized I posted this in the 1.x forum instead of the 2.x forum. Can I get a moderator to move this, or should I re-post?

Note: I've solved most of these issues by using a Viewport component as my base window instead of a panel, but I would still be curious to know why I got the error.


Hello,

I'm working on designing and developing a new application that I have decided to use Ext for, I'm more excited about Ext then I've been since I learned PHP several years ago. I'm just getting started though, and I'm still trying to wrap my brain around some of the basic concepts. I'm clearly missing something. I've tried searching for the error messages I'm getting but I'm not finding the answers I'm looking for and I haven't found documentation or examples that cover this. If those do exist, a link to them would probably be sufficient.

The application I'm building needs to pretty much do everything dynamically, in terms of the interface that it's going to show. When the page loads I'm not sure if I'm going to show a login form or a full-blown portal with grids and things, so I can't have everything render to existing HTML elements. So I'm just starting by setting up a panel that I render to the body where I can put a header with a logo or something, a top toolbar where I can add whatever buttons are necessary after figuring out what the user needs to see, the body content, and a footer at the bottom with some text in it. It works fine to add that main panel by using Ext.getBody for the renderTo config option, I see it show up at max width with my header and title in it (side question: how easy is it to make my main panel 100% of the viewport height?).

Then I try to create a second panel for my footer text (I'm not even sure if that's the correct component to use for a text container). I use the add method of the main panel to add my footer panel, and then when I use the render method on the footer panel I get an error that says "ct has no properties" on line 15633 of the debug file. I can't see anything in the source file that tells me what is wrong, but the undefined values in the call stack are telling me that I'm not understanding something correctly. In my mind it makes sense to add one panel to another and then call render on the second one to get it to show up.

Here is the stack:

onRender(null, null)ext-all-debug.js (line 15633)
render(undefined, undefined)ext-all-debug.js (line 12250)
render()ext-all-debug.js (line 13807)
init()lms.js (line 48)
fire()ext-all-debug.js (line 1504)
fireDocReady()

My HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>LMS 7</title>
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">
    <link rel="stylesheet" type="text/css" href="include/main.css">
    <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="ext/ext-all-debug.js"></script>
    <script type="text/javascript" src="include/lms.js"></script>
    <script type="text/javascript">
    Ext.onReady(app.lms.init, app.lms);
    </script>
  </head>
  <body>
    <div id="require">The LMS requires that your browser support Javascript.</div>
    <script type="text/javascript">
    document.getElementById("require").style.display = "none";
    </script>
  </body>
</html>
And my JS file:
Code:
Ext.BLANK_IMAGE_URL = "../ext/resources/images/default/s.gif";
Ext.namespace("app");

app.lms = function()
{
  // private variables
  var lms_name = "LMS";
  var lms_version = "7.0";
  var footer_text = "Text for the panel footer";

  // private functions

  // public space
  return (
  {
    // public properties
    main_win: null,
    main_footer: null,

    // public methods
    init: function()
    {
      Ext.Msg.show({
        title: lms_name,
        msg: lms_name + " version " + lms_version + " initialized.",
        buttons: Ext.Msg.OK,
        icon: Ext.Msg.INFO
      });

      main_win = new Ext.Panel({
        autoHeight: true,
        autoScroll: true,
        autoWidth: true,
        buttonAlign: "left",
        elements: "header,tbar,body",
        id: "lms_main_win",
        renderTo: Ext.getBody(),
        title: lms_name
      });

      main_footer = new Ext.Panel({
        autoHeight: false,
        height: 50,
        elements: "body",
        id: "lms_main_footer"
      });
      main_win.add(main_footer);
      main_footer.render();
    }
  });
}();
Again, the main_footer.render line raises the error. If I comment that out it works fine, but I don't see any type of footer container. If anyone could point out where I'm going astray I would appreciate it, thanks.