Page 1 of 2 12 LastLast
Results 1 to 10 of 18

Thread: Tbar in form

  1. #1

    Default Tbar in form

    Hello!

    I found this excellent framework a couple of days ago and I find it very useful despite that I have never developed i JavaScript before.

    I'm learning by trial-and-error and I do solve my problems after searching this forum, google etc but I'm stuck on a problem that I think I know the reason for, but not how to solve it. I've find lots of similar problems but I have not been able to use that knowledge to fix my problem.

    My problem
    I have a FormPanel with a tbar of fields and a htmlarea as items. When data is loaded it will be assigned to the htmlarea, but not the fields inside the tbar. If I move a field from the tbar outside the tbar (like the htmlarea), it will work fine. Saving is no problem, all values from the tbar will submit like a charm!

    I'm having trouble understanding in which way events are launched (for example render).

    My testing code
    Code:
    Ext.msp.articleEditorForm = Ext.extend(Ext.form.FormPanel, { 
           frame: true, 
           width: 600, 
           labelWidth: 70,
           method: 'POST',
           reader: new Ext.data.JsonReader({ 
               fields: ['id', 'headline', 'created_date', 'publish_date', 'publish', 'content' ], 
               root: 'data' 
        }),
                        
        initComponent:function() {
            Ext.apply(this, {
                items: [{
                    // Fields within tbar do not load
                    // but saves fine
                    tbar: [{                
                        xtype: 'textfield',
                        name: 'headline',
                        
                    },'-',{ 
                        xtype: 'datefield', 
                        name: 'publish_date',
                        format: 'Y-m-d'
                    },{
                          xtype:'timefield',
                        name: 'publish_time',
                          format: 'H:i',
                        increment: 30,
                        width: 100,
                    },'->',{
                          xtype:'checkbox',
                        name: 'publish',
                        boxLabel: 'Publish' 
                    }]
                // First level fields do load
                },{
                    xtype: 'hidden',
                    fieldLabel: 'id',
                    name: 'id',
                },{
                    
                       xtype: 'textfield',
                    name: 'headline',        
                },{ 
                    xtype: 'htmleditor', 
                    name: 'content', 
                    hideLabel: true, 
                    labelSeparator: '', 
                    height: 500, 
                    anchor: '100%' 
                }],
                buttons:[{
                    text: 'Save',
                    formBind: true,
                    scope: this,
                    handler: this.onSubmit
                }]
             });
                     
             Ext.msp.articleEditorForm.superclass.initComponent.apply(this, arguments);
        },
              
        onRender:function() {
            Ext.msp.articleEditorForm.superclass.onRender.apply(this, arguments);            
        },
                
        onSubmit:function() {
            this.getForm().submit({
                        
                url: 'url_removed',
                scope: this,
                //success:this.onSuccess,
                //failure:this.onFailure,
                /*params: { 
                    id:'save'
                },*/
                //waitMsg:'Saving...',
                });
            },
    });
    
    Ext.reg('articleEditorForm', Ext.msp.articleEditorForm);
        
    function newArticleEditorForm ( articleId ) {
        test = new Ext.msp.articleEditorForm;
    
        test.load ({
            url: 'url_removed',
           });
        
        // Returns to a window, not shown in this example
        return test;
    }

  2. #2

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    The fields in the tbar will have to be programatically added to the underlying BasicForm so that it knows about them.

    They still won't be submitted though because the tbar is outside of the <form> element. The FormPanel's body is the <form> element which is the innermost of the structure of a Panel.

    I have an outstanding Feature Request to make the overall, outermost Element the <form>.

    I have been using this in my app for a while and it works well. All input fields anywhere in it relate to the form and get submitted.

    http://extjs.com/forum/showthread.php?p=277284

  4. #4

    Default

    Hi!

    I understand the problem more after reading Animal's post. But unfortunately I do not understand much about what his suggested fix do.

    Can you explain it in a lower level using my code as an example?

  5. #5
    Sencha User mschwartz's Avatar
    Join Date
    Nov 2008
    Location
    San Diego, Peoples' Republic of California
    Posts
    2,061

    Default

    http://extjs.com/forum/showthread.ph...612#post236612

    Put the javascript there in a file and include that in your page.

  6. #6

    Default

    Quote Originally Posted by mschwartz View Post
    http://extjs.com/forum/showthread.ph...612#post236612

    Put the javascript there in a file and include that in your page.
    Didn't help, same behavior.

  7. #7

    Default

    Is this override supposed to work on 2.2?

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Did you check anything? Set breakpoints in the code? Examine the DOM structure your FormPanel ended up with?

  9. #9

    Default

    Quote Originally Posted by Animal View Post
    Did you check anything? Set breakpoints in the code? Examine the DOM structure your FormPanel ended up with?
    The only thing that I have checked is to se if the initComponent executes, and it does. I have included your code after ext but before my code. Your code executes after mine and I do not know how to fix that, but I'm trying to!

    As I wrote in my first post, Javascript is new to me and I have lots to learn!

  10. #10
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Examine the DOM of te FormPanel. The outermost element should be a <form>

Page 1 of 2 12 LastLast

Posting Permissions

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