Results 1 to 3 of 3

Thread: Just started exploring ExtJS

  1. #1
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default Just started exploring ExtJS

    Hi all,
    I'm a classic (old?) Java desktop developer and architect and I've started studying JavaScript and some web-related amenities. In the meanwhile, I stumbled upon ExtJS and some other JavaScript libraries and frameworks.

    I'd like to evaluate ExtJS and I'm searching for a quite important information, to me. I am creating a web page (a simple form with a bunch of fields and a submit button). As it is now, the "application" works: I fill the fields, click the button and it goes to page.html?field1=value1&field2=value2 and so on.

    HTML Code:
    <!DOCTYPE html>
    <!--
    PastaMi
    
    Copyright  2014  Marco Bresciani
    
    This file is part of PastaMi.
    
    PastaMi is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as
    published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
    
    PastaMi is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
    of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
    
    You should have received a copy of the GNU General Public License along with PastaMi. If not, see
    <http://www.gnu.org/licenses/>.
    -->
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>PastaMi - ?????</title>
    
        <!--<script type="text/javascript" src="js/script.js">-->
        <script type="text/javascript">
            // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3-or-Later
            "use strict";
    
    <!-- hic sunt leones -->
    
            // @license-end
        </script>
    </head>
    <body lang="it" role="document">
    <header>
        <h1>Componi la tua pasta!</h1>
    </header>
    <article id="piatto">
        <h2>Scegli il peso, la pasta e il sugo. E... aggiungi quello che vuoi!</h2>
        <form role="application">
    
            <!-- sezione di scelta della misura del piatto -->
            <section id="misura" title="Misura del piatto">
                <header><h3>Misura del piatto</h3></header>
                <p role="menubar">
                    <input type="radio" name="piatto" id="assaggio" value="assaggio" /><label for="assaggio" role="menuitem">30g</label>
                    <input type="radio" checked name="piatto" id="piccolo" value="piccolo" /><label for="piccolo" role="menuitem">50g</label>
                    <input type="radio" name="piatto" id="doppio" value="doppio" /><label for="doppio" role="menuitem">30g+30g</label>
                    <input type="radio" name="piatto" id="normale" value="normale" /><label for="normale" role="menuitem">70g</label>
                    <input type="radio" name="piatto" id="triplo" value="triplo" /><label for="triplo" role="menuitem">30g+30g+30g</label>
                    <input type="radio" name="piatto" id="grande" value="grande" /><label for="grande" role="menuitem">100g</label></p>
            </section>
    
            <!-- solo per un tipo di pasta -->
            <section id="tipo-1">
                <!-- sezione di scelta del tipo di pasta -->
                <section id="tipo" title="Tipo di pasta">
                    <header><h3>Tipo di pasta</h3></header>
                    <p role="menubar">
                        <input type="radio" checked name="pasta" id="spaghetti" value="spaghetti" /><label for="spaghetti" role="menuitem">spaghetti</label>
                        <input type="radio" name="pasta" id="penne" value="penne" /><label for="penne" role="menuitem">penne</label>
                        <input type="radio" name="pasta" id="rigatoni" value="rigatoni" /><label for="rigatoni" role="menuitem">rigatoni</label></p>
                </section>
    
                <!-- sezione di scelta del tipo di sugo -->
                <section id="sugo" title="Tipo di sugo">
                    <header>
                        <h3>Tipo di sugo</h3></header>
                        <p role="menubar">
                            <input type="radio" name="sugo" id="rag" value="rag" /><label for="rag" role="menuitem">rag</label>
                            <input type="radio" name="sugo" id="tonno" value="tonno" /><label for="tonno" role="menuitem">tonno</label>
                            <input type="radio" checked name="sugo" id="aop" value="aop" /><label for="aop" role="menuitem">aglio, olio &amp; peperoncino</label></p>
                </section>
            </section>
    
            <!-- solo per un tipo di pasta -->
            <section id="tipo-2">
                <!-- sezione di scelta del tipo di pasta -->
                <section id="tipo2" title="Tipo di pasta">
                    <header><h3>Tipo di pasta (2)</h3></header>
                    <p role="menubar">
                        <input type="radio" checked name="pasta" id="spaghetti2" value="spaghetti" /><label for="spaghetti2" role="menuitem">spaghetti</label>
                        <input type="radio" name="pasta" id="penne2" value="penne" /><label for="penne2" role="menuitem">penne</label>
                        <input type="radio" name="pasta" id="rigatoni2" value="rigatoni" /><label for="rigatoni2" role="menuitem">rigatoni</label></p>
                </section>
    
                <!-- eventuale secondo tipo di sugo -->
                <section id="sugo2" title="Tipo di sugo">
                    <header>
                        <h3>Tipo di sugo (2)</h3></header>
                    <p role="menubar">
                        <input type="radio" name="sugo" id="rag2" value="rag" /><label for="rag2" role="menuitem">rag</label>
                        <input type="radio" name="sugo" id="tonno2" value="tonno" /><label for="tonno2" role="menuitem">tonno</label>
                        <input type="radio" checked name="sugo" id="aop2" value="aop" /><label for="aop2" role="menuitem">aglio, olio &amp; peperoncino</label></p>
                </section>
            </section>
    
            <!-- eventuale terzo tipo di pasta -->
            <section id="tipo-3">
                <!-- sezione di scelta del tipo di pasta -->
                <section id="tipo3" title="Tipo di pasta">
                    <header><h3>Tipo di pasta (3)</h3></header>
                    <p role="menubar">
                        <input type="radio" checked name="pasta" id="spaghetti3" value="spaghetti" /><label for="spaghetti3" role="menuitem">spaghetti</label>
                        <input type="radio" name="pasta" id="penne3" value="penne" /><label for="penne3" role="menuitem">penne</label>
                        <input type="radio" name="pasta" id="rigatoni3" value="rigatoni" /><label for="rigatoni3" role="menuitem">rigatoni</label></p>
                </section>
    
                <!-- eventuale terzo tipo di sugo -->
                <section id="sugo3" title="Tipo di sugo">
                    <header>
                        <h3>Tipo di sugo (3)</h3></header>
                    <p role="menubar">
                        <input type="radio" name="sugo" id="rag3" value="rag" /><label for="rag3" role="menuitem">rag</label>
                        <input type="radio" name="sugo" id="tonno3" value="tonno" /><label for="tonno3" role="menuitem">tonno</label>
                        <input type="radio" checked name="sugo" id="aop3" value="aop" /><label for="aop3" role="menuitem">aglio, olio &amp; peperoncino</label></p>
                </section>
            </section>
    
            <!-- sezione di scelta dei condimenti aggiuntivi -->
            <section id="extra" title="Aggiunte extra">
                <header><h3>Aggiunte extra</h3></header>
                <p role="menubar">
                    <input type="checkbox" name="extra" id="parmigiano" value="parmigiano" /><label for="parmigiano" role="menuitem">parmigiano</label>
                    <input type="checkbox" name="extra" id="peperoncino" value="peperoncino" /><label for="peperoncino" role="menuitem">peperoncino</label>
                    <input type="checkbox" name="extra" id="pepe" value="pepe" /><label for="pepe" role="menuitem">pepe</label></p>
            </section>
    
            <!-- sezione di conferma dell'ordine -->
            <section id="conferma">
                <header><h3>Totale e ordine</h3></header>
                <p role="menubar">
                    <button id="ordina" ><label>Conferma e ordina</label></button>
                </p>
            </section>
        </form>
    </article>
    
    <footer class="bottom">
    <p>PastaMi</p>
    <p>Copyright  2014  Marco Bresciani</p>
    <p>This file is part of PastaMi.</p>
    <p>PastaMi is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.</p>
    <p>PastaMi is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.</p>
    <p>You should have received a copy of the GNU General Public License along with PastaMi. If not, see &lt;<a href="http://www.gnu.org/licenses/">http://www.gnu.org/licenses/</a>&gt;.</p>
    <p><a href="about/javascript.html" rel="jslicense">JavaScript license information</a></p>
    </footer>
    </body>
    </html>
    Before getting deeper and starting actually using ExtJS, what I'd like to understand is: can I keep the page as is and transform it into an ExtJS application through JavaScript, or the only way I can create an ExtJS application is through JavaScript?
    For example, here: http://www.referencedesigner.com/tut...s/extjs_02.php the HTML is actually not useable at all, unless managed and modified by ExtJS scripting.
    My page might be a bit rough (I'm still studying and learning) but it works without JS or CSS.
    I've tried another famous JavaScript frameworks for widgets/components and I was able to customize the GUI and the actions with a "simple" JavaScript without any modification to my HTML.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    If you want to use Ext, then yes you would need to create the app using Ext API, and our syntax that will intern generate the HTML output that will render what you want.

    Typically you would separate all of your code to where the HTML simply loads the framework and your code from JS file.
    index.html :: (ext-all.css, ext-all.js, app.js)

    The reason you were able to change your HTML with just JS, is that the browser supports JS, so it ran.

    Including our JS, just allows you to access to our components built from JS to generate the resulting output.

    The URL example you provide (extjs_02.php) was a quick and sloppy approach.

    Most use ExtJS for a complete application. You can embed our components into existing html pages, ( widget approach ), but our target is full web applications where it worth loading our API. I may be too much if you are just looking for widgets to enhance your page.

    Scott.

  3. #3
    Sencha User
    Join Date
    Aug 2014
    Posts
    2

    Default

    Hi Scott, thank for your precise reply.

    As I wrote I have actually just started studying web so mine won't be a "complete application" with all things in it. I mean: my idea was to create the menu/web site of my retirement pasta shop that I'd love to open in Tokyo (my wife is Japanese) in... well... at least 30-35 years from now.

    Anyway: ExtJS seems to me a very nice and complete framework but, probably, it's too much for my current purpose (still reading the "JavaScript The Definitive Guide"). But, for sure, it's something worth studying! I think I'll go on with JavaScript and some other simpler framework, and then move to ExtJS.

    Thank you very much,

    Marco
    Last edited by Geco; 24 Aug 2014 at 12:13 AM. Reason: formatting...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •