WebGyver
6 Jul 2007, 8:15 AM
(Sorry if I am cross-posting. For some reason, the topic I posted in GENERAL disappeared or got moved or something . . . and then I figured out that this forum is really much more suitable. Won't happen gain.)
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" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<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>
<!-- Tabs Example Files -->
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<!-- Common Styles for the examples -->
<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 sections lookup hideous -->
<pre>
var tabs = new Ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');</pre>
<!-- end pre -->
</div>
<div id="markup" class="tab-content">
<!-- pre sections lookup hideous -->
<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>
<!-- end pre -->
</div>
</div>
</body>
</html>
Thanks for any help, suggestions or even pointers to other ext.js tutorials.
.
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" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<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>
<!-- Tabs Example Files -->
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<!-- Common Styles for the examples -->
<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 sections lookup hideous -->
<pre>
var tabs = new Ext.TabPanel('tabs1');
tabs.addTab('script', "View Script");
tabs.addTab('markup', "View Markup");
tabs.activate('script');</pre>
<!-- end pre -->
</div>
<div id="markup" class="tab-content">
<!-- pre sections lookup hideous -->
<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>
<!-- end pre -->
</div>
</div>
</body>
</html>
Thanks for any help, suggestions or even pointers to other ext.js tutorials.
.