1. #1
    Sencha Premium Member
    Join Date
    Feb 2013
    Posts
    49
    Answers
    1
    Vote Rating
    2
    vicvolk87 is on a distinguished road

      0  

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

    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
    514
    Answers
    31
    Vote Rating
    82
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      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
    49
    Answers
    1
    Vote Rating
    2
    vicvolk87 is on a distinguished road

      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
    Zasud is on a distinguished road

      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.

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar