1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    arwo is on a distinguished road

      0  

    Exclamation Ext.Window with HTML Form tag inside

    Ext.Window with HTML Form tag inside


    Hi, I'm tryin to make a form inside open Ext.Window.
    The problem is nothing shows up between HTML <table><form ...> ... </form></table> tags :/
    When I erase <table> everything between it is ok, otherwise isn't :/

    Here is JS file:
    Code:
    Ext.onReady(function(){
    					 
        var win;
        var okno = Ext.get('rejestracja');
    
        okno.on('click', function(){
            // create the window on the first click and reuse on subsequent clicks
            if(!win){
                win = new Ext.Window({
    				title: 'Rejestracja nowego użytkownika',
                    layout: 'fit',
    				autoLoad: 'http://localhost/cc/rejestracja.php',
    				width: 300,
                    height: 300,
                    closeAction: 'hide',
    				maximizable: true,
    				collapsible: true,
    				autoScroll: true
                });
            }
            win.show(this);
    		
        });
    	
    });

    ...and HTML:
    HTML Code:
    <table border="0" cellpadding="3" cellspacing="0">
    <tr><td colspan="2" align="center"><h2>Zarejestruj się...</h2><br></td></tr>
    <form name="rejestracja" action="rejestracja.php" method="post" onsubmit="return validate()">
    <tr><td align="right"><b>Użytkownik:</b></td><td> <input type="text" name="user" class="text"></td></tr>
    <tr><td align="right"><b>Imię:</b></td><td> <input type="text" name="imie" value="<?php echo $_POST['imie']; ?>" class="text"></td></tr>
    <tr><td align="right"><b>Nazwisko:</b></td><td> <input type="text" name="nazwisko" value="<?php echo $_POST['nazwisko']; ?>" class="text"></td></tr>
    <tr><td align="right"><b>Telefon:</b></td><td> <input type="text" name="telefon" value="<?php echo $_POST['telefon']; ?>" class="text"></td></tr>
    <tr><td align="right"><b>Email:</b></td><td> <input type="text" name="email" value="<?php echo $_POST['email']; ?>" class="text"></td></tr>
    <tr><td align="right"><b>Hasło:</b></td><td> <input type="password" name="haslo" value="<?php echo $_POST['haslo']; ?>" class="text"></td></tr>
    <tr><td colspan="2" align="center"><br><input type="submit" name="submit" value="Zarejestruj" class="submit"></td></tr>
    </form>
    </table>
    The problem is interesting.
    Anyone of you had it before?

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I'm not sure what the problem is, but I'd just advise you to go fully "Ext" instead of using old fashioned HTML inside Ext widgets:

    Code:
    Ext.onReady(function(){		 
        var win;
        var okno = Ext.get('rejestracja');
    
        okno.on('click', function(){
            // create the window on the first click and reuse on subsequent clicks
            if(!win){
                win = new Ext.Window({
    		title: 'Rejestracja nowego użytkownika',
                    layout: 'fit',
    		width: 300,
                    height: 300,
                    closeAction: 'hide',
    		maximizable: true,
    		collapsible: true,
    		autoScroll: true,
                    listeners: {
                        render: function() {
    		        Ext.Ajax.request({
                                url: 'http://localhost/cc/rejestracja.php',
                                success: function(response) {
                                    win.add(eval(response));
                                    win.doLayout();
                                }
                            });
                        }
                    }
                });
            }
            win.show(this);
        });
    });
    The PHP should return a javascript object which is a config object for a Component to be passed to the add() call you see above. It will be evaluated and added as an Ext FormPanel dynamically.

    PHP Code:
    {
        xtype: 'form'
        title: 'Zarejestruj się...',
        items: [{
            name: 'user',
            fieldLabel: 'Użytkownik'
        }, {
            name: 'imie',
            fieldLabel: 'Imię',
            value: "<?php echo $_POST['imie']; ?>"
        }]
    }
    OK, you get the idea for the rest of the form...

  3. #3
    Ext User
    Join Date
    May 2007
    Location
    Niskayuna, NY
    Posts
    22
    Vote Rating
    0
    andersto is on a distinguished road

      0  

    Default


    As to the original problem, I don't think the form tag can be inside the table tag. Try moving the form tag outside the table.

    But Animal I'm curious, why is going totally Ext as opposed to HTML better? There are better tools for laying out HTML then straight Ext forms. I've looked at the GUI builder and it's nice, but there are still better HTML layout tools. I agree if the form is something small and simple, < 5 fields use Ext, but for something larger HTML is easier.

    Don't get me wrong, I love Ext you guys are doing a great job. But I like the simple solutions that are easy to maintain.

    So enlighten me, what am I missing?

    Todd

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Why easier?

    It's just

    Code:
    <tr><td><label for="fldName">Field Label</label></td><td><input name="fldName></td></tr>
    versus

    Code:
    {
        fieldLabel: 'Field Label',
        name: 'fldName'
    }
    In fact, who authors straight, literal HTML?

    A JSP page will use custom tags, which encapsulate a page author's instructions.

    It is those tag classes that will output any content. There's no reason why they have to output a stream of HTML. They could capture their information, and output a stream of JSON.

    Styling and layout instructions can all be embedded in Ext config objects.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    In fact, you could extend the Container class to implement this pattern:

    Code:
    Ext.override(Ext.Container, {
        addLoadedComponent: function(url, params) {
            Ext.Ajax.request({
                url: url,
                params: params,
                callback: function(response) {
                    this.add(eval(response));
                    this.doLayout();
                }
            });
        }
    });
    Then the OP's Window could be created like this:

    Code:
    Ext.onReady(function(){		 
        var win;
        var okno = Ext.get('rejestracja');
    
        okno.on('click', function(){
            // create the window on the first click and reuse on subsequent clicks
            if(!win){
                win = new Ext.Window({
    		title: 'Rejestracja nowego użytkownika',
                    layout: 'fit',
    		width: 300,
                    height: 300,
                    closeAction: 'hide',
    		maximizable: true,
    		collapsible: true,
    		autoScroll: true,
                    listeners: {
                        render: function() {
    		        this.addLoadedComponent('http://localhost/cc/rejestracja.php');
                        },
                        scope: this
                    }
                });
            }
            win.show(this);
        });
    });

  6. #6
    Ext User
    Join Date
    May 2007
    Location
    Niskayuna, NY
    Posts
    22
    Vote Rating
    0
    andersto is on a distinguished road

      0  

    Default


    Correct, for simple forms Ext's syntax is fine. And the original post could easily be converted to Ext. Also, he used a table for layout, when CSS would have done the job much cleaner.

    But when I have complex forms, nested fieldsets, nested columns, javascript event handlers, etc... that the Ext style ends up being very....deep and tough to follow.

    This is how I do it. I insert custom tags into the HTML and a server side app only returns the HTML contained in those tags. So I can develop using a HTML/js page and return to Ext only the form portion. When developing the page, my HTML editor (HomeSite) ignores those tags and treats the page like normal HTML. So now I can layout the page using HomeSite, and debug the js using firebug. I don't have to bring up the entire app to debug a single page. It's not perfect and I'm always looking to improve.

    My method works, and HTML is generic. Why is a pure Ext form better then HTML?

    I have a worry that if I convert all my pages to Ext layout, that I will be the only one that can maintain them. Where as, I can go out and hire an HTML designer that will understand all my forms.

    I realize that maybe I'm just use to HTML and it's familiar. Once I send a week forcing my self to do Ext layout, will I understand that just as well as HTML?

    Is Ext syntax faster? It's just a Json block right?

    You obviously read both HTML and Ext, are you saying that with a large complex form, you can read and understand Ext as well as HTML? When laying out a large Ext form, you don't want a WYSIWGY view of the layout?

    I'm just trying to make sure I'm not missing something that is better or faster?

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I understand that it's not familiar, and seems more difficult right now.

    But using the xtype system, where you don't actually create objects, but just specify pure JSON, you can have nested fieldsets, nested columns, embedded event handlers, everything.

    It's just a different form of nesting. Instead of lots of "<" ">" delimited tags with attributes, its "{" "}" delimited object declarations with properties:

    Code:
    {
        xtype: 'form',  // Means this config object will create new Ext.FormPanel
        layout: 'column',
        items: [{
            title "Column 1",
            columnWidth: 0.5,
            layout: 'form',
            defaultType: 'field',
            items: [{
                fieldLabel: 'Column 1, Field 1',
                name: 'myField',
                listeners: {
                    focus: function(f) {
                    },
                    change: function(f, newVal, oldVal) {
                    }
                }
            }, {
                fieldLabel: 'Column 1, Field 2',
                name: 'secondField'
            }]
        }, {
            title: "Column 2",
            columnWidth: 0.5,
            layout: 'form',
            defaultType: 'field',
            items: [{
                fieldLabel: 'Column 2, Field 1',
                name: 'col2Field1'
            }, {
                fieldLabel: 'Column 2, Field 2',
                name: 'col2Field2'
            }]
        }],
        tbar: [{
            text: 'Button 1',
            handler: function(b) {
            }
        }, {
            text: 'Button 2',
            handler: function(b) {
            }
        }, {
            text: 'Button 3',
            handler: function(b) {
            }
        }]
    }
    It's similar nesting to authoring HTML, except that you get the much more capable Ext classes to specify properties for instead of the limited HTML attributes, and using the listeners, you cal jump right into fully OO javascript event handling.

    Just add the above to an Ext.Window which has layout:'fit', show the Window, and you should have a nice form.

    Once you get used to it, because of being able to move from declarative to imperiative easily in the same syntax, it's actually easier than writing HTML.

  8. #8
    Sencha User cvillaronga's Avatar
    Join Date
    Aug 2007
    Location
    Maracaibo, VENEZUELA
    Posts
    12
    Vote Rating
    0
    cvillaronga is on a distinguished road

      0  

    Default how do i?

    how do i?


    hi Animal,

    how do i change the type of field to HtmlEditor or another 1.1 fieldtype, i have tried in many ways but i have always received the same 'textfield' type.

    Thanks.

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    1.1?

    This is 2.

    Use the xtype system to specify exactly what type of item should be created from an item config object.

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    See the defaultType setting in the container? That's what any item without an xtype will be created as.