Results 1 to 2 of 2

Thread: Small problem with form layout

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Moscow
    Posts
    137

    Default Small problem with form layout

    I made form with code like this :

    Code:
    Ext.onReady(function() {
    
      var component = new Ext.form.FormPanel({
    
           trackResetOnLoad:true,
           frame:true,
           labelWidth: 120,
           bodyStyle:'padding:5px',
           title: 'Editing',
           items: [{
                layout:'column',
                border:false,
                anchor:'100% 30%',
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [
                    {xtype:'textfield', fieldLabel:'Caption', name:'sCaption', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Caption', name:'sCaption', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Caption', name:'sCaption', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Caption', name:'sCaption', anchor:'95%'}
                    ]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [
                    {xtype:'textfield', fieldLabel:'Description', name:'sDescription', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Description', name:'sDescription', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Description', name:'sDescription', anchor:'95%'},
                    {xtype:'textfield', fieldLabel:'Description', name:'sDescription', anchor:'95%'}
                    ]
                }]
            }, 
                  {xtype:'hidden', name:'HiddenField', value: 'HiddenValue'},
    
                  {layout:'fit',
                   anchor:'100% 70%',
                   items:[
                     {xtype:'tabpanel',
                      activeTab: 0,
                      enableTabScroll:true,
                      height:100,
                      anchor:'100%',
                      defaults:{bodyStyle:'padding:2px',closable:false},
                      items:[{
                             title: 'Data',
                             iconCls: 'tabs',
                             layout:'fit',
                             items: [
                                      {xtype:'htmleditor', fieldLabel:'Data', name:'sData' }
                                    ]
                          }]
                    }]
                  }
               ]
           });
    
        var window = new Ext.Window({
            title: 'Resize Me',
            width: 500,
            height:300,
            layout: 'fit',
            plain:true,
            bodyStyle:'padding:5px;',
            buttonAlign:'center',
            items: component,
    
            buttons: [{
                text: 'Send'
            },{
                text: 'Cancel'
            }]
        });
    
        window.show();
    });
    When I try to resize this window - tab panel gets over the fields... Here is an image :


    Why tabpanel not getting smaller? How this could be corrected?

  2. #2

Posting Permissions

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