JS Ext not defined

Question

I've created a web page that is suppose to look like it has tabs on it. In our development environment everything is fine, when we moved it to stage it was fun until this morning now it's throwing errors and I don't know enough about JS to fix it.

This is the error:

Ext is not defined
[Break On This Error]
Ext.get(newboxes[x].id+"_href").removeClass("selected");

Here is the script:

<script language="javascript">
function showonlyone(thechosenone) {
      var newboxes = document.getElementsByTagName("div");
            for(var x=0; x<newboxes.length; x++) {
                  name = newboxes[x].getAttribute("name");
                  if (name == 'newboxes') {
                        if (newboxes[x].id == thechosenone) {
                        newboxes[x].style.display = 'block';
                        Ext.get(newboxes[x].id+"_href").addClass("selected");
                        } else {
                        newboxes[x].style.display = 'none';
                        Ext.get(newboxes[x].id+"_href").removeClass("selected");
                        }
                    }
            }
}
</script>

Here is the code:

<!-- Tabs start -->
 <div class="fulltab">  
    <div class="tabheader">
        <ul class="tabs">
            <li><a id="tab01_href" href="javascript:showonlyone('tab01');" class="selected">Applications</a></li>
            <li><a id="tab02_href" href="javascript:showonlyone('tab02');" >Features</a></li>
            <li><a id="tab03_href" href="javascript:showonlyone('tab03');" >Testimonials</a></li>
        </ul>
    </div>
    <div style="clear:both;"></div>
<div id="contentDiv">
      <div class="tab-content-wrap" style="background: url(../images/block3.png) no-repeat;">
        <div name="newboxes" id="tab01" class="tab-content" style="display: block;">
            <br /><br />
             <img class="alignleft" style="float:left; margin:5px 11px;border:1px solid #6B6B6B;" src="../images/tt_ss.jpg" alt="" width="400px" /><br />
                        <u><b>STUFF</b></u>
                        <ul style="margin-left:440px;list-style-type:disc;padding:0;margin-top:0;">
                        <li>STUFF</li>
                        <li>STUFF</li>
                        <li>STUFF</li>
                        </ul>
        </div>

        <div name="newboxes" id="tab02" class="tab-content" style="display: none;">
        <div style="margin-left:10px; width:700px;">
            <br /><br />
            <strong>STUFF</strong><br />
            <ul style="margin-left:10px; margin-top:0px;list-style-type:disc;padding: 0;">
                    <li>STUFF</li>
                    <li>STUFF</li>
            </ul>
        </div>
        </div>
    <div name="newboxes" id="tab03" class="tab-content" style="display: none;">
         <div style="padding-right:25px;padding-top:10px;">
            <ul>
                <p>STUFF</p>
                <p>STUFF</p>
            </ul>
         </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
</div>
    <!-- Tabs End -->

I could use a lot of help!

Answer 1

We were able to solve the issue. The dev environment was pulling a file that stage didn't have. We were able to fix this with the original developers help. thanks all!

Answer 2

You need to include Ext JS in your page. How you do this depends on the version of Ext JS you intend to use. Judging by your usage, it may be Ext JS 3. Try adding this to your head, to connect the CDN-hosted copy of Ext JS 3.4:

<script type="text/javascript" src="http://cdn.sencha.io/ext-3.4.0/ext-all.js"></script>

If your page works after that, you may wish to read an Overview of Ext JS, or upgrade to Ext JS 4. Keep in mind that Ext JS comes with licensing restrictions.