1. #1
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    51
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default Problem using Ext.Direct with extended forms

    Problem using Ext.Direct with extended forms


    I am trying to use Ext.Direct to submit form that has been extended.

    In the following example the form guestbookform created on the fly works fine, the server method is called with the form parameters.
    However the extended FormPanel, when created guestbookform2 and submitted results in a normal submit to the HTML page, the Ext.Direct api is not recognised.

    Does anybody know why this is not working ?



    Code:
    Ext.Direct.addProvider(Ext.app.REMOTING_API);
    
    guestbookForm2 = Ext.extend(Ext.form.FormPanel, {
        initComponent: function() {
             Ext.apply(this, {
                 api: {
                     submit: Guestbook.addEntry
                 },
                 id: 'aricle_form',
                fileUpload: true,
                border: false,
                height: 250,
                bodyStyle: 'padding: 15px;',
                items: [{
                    xtype: 'textfield',
                    name: 'firstName',
                    fieldLabel: 'First Name'
                }, {
                    xtype: 'textfield',
                    name: 'lastName',
                    fieldLabel: 'Last Name'
                }, {
                    xtype: 'textarea',
                    name: 'message',
                    width: 300,
                    fieldLabel: 'Message'
                }],
                buttons: [{
                        text: 'Submit',
                        handler: function() {
                            this.form.submit();
                        },
                        scope: this
                }]
            });
            guestbookForm2.superclass.initComponent.call(this, arguments);
        }
    });
    
    
    
    Ext.onReady(function() {
        Ext.QuickTips.init();
        var guestbookform2 = new guestbookForm2();
        var guestbookform = new Ext.form.FormPanel({
            api: {
                submit: Guestbook.addEntry
            },
    
            fileUpload: true,
            border: false,
            height: 250,
            bodyStyle: 'padding: 15px;',
            items: [{
                xtype: 'textfield',
                name: 'firstName',
                fieldLabel: 'First Name'
            }, {
                xtype: 'textfield',
                name: 'lastName',
                fieldLabel: 'Last Name'
            },{
                xtype: 'textarea',
                name: 'message',
                width: 300,
                fieldLabel: 'Message'
            }],
                buttons: [{
                    text: 'Submit',
                    handler: function() {
                        guestbookform.getForm().submit();
                    }
            }]
       });
    
    
       var panel = new Ext.Panel({
           title: 'Leave a Message',
           items: [
                guestbookform
            ]
       });
    
       panel.render(document.body);
    
    });
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Editor Grid/Writer Example</title>
    
         <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.1.1/resources/css/ext-all.css" />
    
    
       
        <link rel="stylesheet" type="text/css" href="../ext/ux/css/fileuploadfield.css" />
        <style>
            .item-over 
            {
            	background-color : Aqua;
            }
        </style>    
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.1.1/ext-all.js"></script>
        <!-- directProxy.rfc was registred in the web.config -->
        <script type="text/javascript" src="../directProxy.ashx"></script>
        
        <script type="text/javascript" src="Guestbook.js"></script>
    
    	<!-- Common Styles for the examples -->
    	<link rel="stylesheet" type="text/css" href="../../shared/examples.css" />
    	<link rel="stylesheet" type="text/css" href="../../shared/icons/silk.css" />
    </head>
    <body>
       
        
    </body>
    </html>

  2. #2
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,664
    Vote Rating
    7
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


    i had simular problems and applied the api later
    Code:
    	onRender: function() {
    		TYPO3.EM.EmTools.superclass.onRender.apply(this, arguments);
    		Ext.apply(this.getForm(),{
    			api: {
    				submit: TYPO3.EM.ExtDirect.uploadExtension
    			},
    			paramsAsHash: false
    		}); 
    	}
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    51
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default


    Thanks I'll give that a try, I was starting to think it had something to do with rendering.

    This would appear to be a bug.

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2008
    Posts
    51
    Vote Rating
    7
    TonySteele is on a distinguished road

      0  

    Default


    Thanks again, that worked

  5. #5
    Sencha Developer
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    482
    Vote Rating
    1
    Wolfgang is on a distinguished road

      0  

    Default


    It is not a bug - it is the concept of lazy loading.
    This is not specific to Ext.Direct but applies also to eventhandler and the like.

    When you extend ("guestbook2") you need to realize that initComponent does not create the object - this happens only when the object renders. This is the concept of lazyloading.
    So anything that actually requires the object to exist should be done in "render" or "afterrender" (depends on what to put there).

Thread Participants: 2