Basic ext.js Question . . . [Archive]

WebGyver

6 Jul 2007, 5:44 AM

Hello there,

Normally, I'm not that dense when it comes to putting together JavaScript solutions based on JavaScript libraries. Really, I have been doing this for more than 10 years now (in one fashion or another), but I'm having a hard time with ext.js.

Perhaps I'm getting too old, but is there anyone who could show me a very simple example of, for example, putting together the tab example with just the bare minimum of files? I would greatly appreciate that.

So, for example, if I look at the "tabs" example and grab all the files that are referenced in the source code, I can make a very simple tab widget. But those included files (JS & CSS) add up to quite a bit.

Next, I went ahead and generated just the files I thought I needed at "Build your own Ext" and referenced the resulting file for my tabs widget. Nothing. I couldn't get this to work at all.

After tinkering around for a couple of hours, replacing and/or removing some of the files in a fully working (and somewhat bloated) "tabs" example that I modified, so that I would only get the very simple tabs widget, I got just a little discouraged.

Any ideas what I might be doing wrong? How can I create a very basic ext.js "tabs" widget without including 100's of KB of JS and CSS files?

Here's my modified example code that works (but I would really much rather reduce it to the bare minimum of include files):

<!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=iso-8859-1">
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-core.js"></script>
<script type="text/javascript" src="../../package/util.js"></script>
<script type="text/javascript" src="../../package/tabs/tabs.js"></script>

<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>

<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<div id="tabs1">
<div id="script" class="tab-content">
<b>Here's my script:</b>

<pre>
var tabs = new Ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');</pre>

</div>
<div id="markup" class="tab-content">

<pre>
<div id="tabs1">
<div id="script" class="tab-content">
(Content goes here)
</div>

<div id="markup" class="tab-content">
(Content goes here)
</div>
</div></pre>

</div>
</div>
</body>
</html>

Thanks for any help, suggestions or even pointers to other ext.js tutorials.

.

brian.moeskau

7 Jul 2007, 8:50 PM

So, just to clarify, is your goal to try and learn Ext, or are you really in need of creating a bare-bones tab distribution for some reason? If you are trying to learn Ext, I would put file size concerns on the back burner for now and just stick with ext-all-debug.js so that you don't waste cycles on a deployment issue. If you really are creating a production app that requires only tabs and nothing else, then the "build your own" page is probably the place to start.

Next, I went ahead and generated just the files I thought I needed at "Build your own Ext" and referenced the resulting file for my tabs widget. Nothing. I couldn't get this to work at all.

Rather than "nothing," I assume you got some JS errors, correct? If that's the case, then you'd have to determine what's missing based on that. I'm not sure what else to tell you without knowing what your build list was and what errors you were getting. If you post your build list someone can probably try to help you out.