Results 1 to 4 of 4

Thread: Window, Form, Tabpanel and Scrollbar - do they work together?

  1. #1
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    54
    Answers
    1
    Vote Rating
    2
      0  

    Default Answered: Window, Form, Tabpanel and Scrollbar - do they work together?

    Hello, guys! Please help, if you know how. I have the simplest test case of a window with a form which contains a tabpanel. This is the only structure which made it possible to have a nice scrollbar inside tabpanels. But with this structure I'm unable to submit my form, I just can't get it. Previously, I did it like this Ext.getCmp('myform').getForm() and everything was fine. But now my task is to get a form which may contain multiple tabs with scrollbars - in case, when the content is larger than the size of a window. As I said, now everything works except one thing - I'm unable to send my form. The little code is:
    Code:
    Ext.create('Ext.window.Window',{
            xtype:'form',
            id:'myform',
            layout:'fit',
            width:500,
            height:150,
            items:[{
                xtype:'tabpanel',
                activeTab:0,
                items:[{
                    title:'tab1',
                    xtype:'panel',
                    layout:'anchor',
                    autoScroll:true,
                    items: [{
                       xtype:'datefield',
                       fieldLabel:'Label',
                       anchor:'100%',
                       name:'field1'
                    },{
                       xtype:'datefield',
                       fieldLabel:'Label',
                       anchor:'100%',
                       name:'field2'
                    },{
                       xtype:'datefield',
                       fieldLabel:'Label',
                       anchor:'100%',
                       name:'field3'
                    }]
                }]
            }],
            buttons:[{
                text:'OK',
                handler:function(btn){
                   var frm=Ext.getCmp('myform').getForm(); // this is not working
                   // the error message is - getForm is not a function
                }
            }]
        }).show();
    Thank you!

    PS. If I create an independent form component and put it inside the window, I lose my scrollbar functionality. Scrollbars just do not show up.

  2. I imagine getForm() is not a function because in your current setup, you are creating an instance of a Window, which doesn't have that method (which you've discovered).

    When using the form as an item of the window, have you set a max height on the window and form? I use something similar, and have no issue with getting scrollbars to show up.

  3. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Answers
    32
    Vote Rating
    89
      1  

    Default

    I imagine getForm() is not a function because in your current setup, you are creating an instance of a Window, which doesn't have that method (which you've discovered).

    When using the form as an item of the window, have you set a max height on the window and form? I use something similar, and have no issue with getting scrollbars to show up.

  4. #3
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    54
    Answers
    1
    Vote Rating
    2
      0  

    Default

    You are absolutely right! In my situation I think of a window as it is a form, but it is not. Finally, I made it work and here is a minimized version of code which combines everything I want. Hope this help someone in future:
    Code:
    var frm=Ext.create('Ext.form.Panel',{
            id:'addform',
            layout:'fit',
            border:false,
            items:[{
                xtype:'tabpanel',
                activeTab:0,
                defaults:{
                    layout:'anchor'
                },
                items:[{
                    title:'Tab 1',
                    xtype:'panel',
                    layout:'anchor',
                    autoScroll:true,
                    items:[.....] // <- many scrollable form items
                },{
                    title:'Tab 2',
                    xtype:'panel',
                    layout:'anchor',
                    autoScroll:true,
                    items:[.....] // <- etc. etc.
                }]
            }],
            buttons:[{
                text:'OK',
                handler:function(){
                    var frm = Ext.getCmp('addform').getForm();
                    // then submit a form as always 
                }
            }]
       });
    
        Ext.create('Ext.window.Window',{        
               layout:'fit',
               width:500,
               height:300,
               items:[frm]
         }).show();

  5. #4
    Sencha User
    Join Date
    May 2013
    Posts
    1
    Vote Rating
    0
      0  

    Default

    I did this process before 4 year ago. I may be a lots of function of get a value of a function. And this is really helpful for us. Overall this coding is so nice. I like your logic and appreciate you mind strategy.

Posting Permissions

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