Results 1 to 2 of 2

Thread: [SOLVED] Combo boxes not displaying when FormPanel initially collapsed

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    61
    Vote Rating
    6
      0  

    Question [SOLVED] Combo boxes not displaying when FormPanel initially collapsed

    Hi-

    I have FormPanel that is rendered to the north section of a border layout that is initially collapsed. I have been playing with the UI to add an image directly to the right of the first combo box and it works great, as long as I set collapsed:false on the FormPanel. If I set collpased:true, the combo boxes don't display correctly when the FormPanel is expanded. If you click the label the input field displays directly over the label. I've tried adding forceLayout: true to various levels but it doesn't seem to change anything.

    Any ideas what I am doing wrong or tips on how to debug this type of layout issue?

    There should be some images below of what it looks like when it is working and when it is not.

    Here is the code of the FormPanel:
    Code:
            seachPanel:function(searchMsgPanel){
                return  new Ext.form.FormPanel({
                           id:'search-form',
                           border:false,
                           labelAlign: 'right',
                           autoScroll: true,
                           bodyStyle: 'padding:10px',
                           region:'north',
                           height:150,
                           collapsed:true,
                           items:[
                               searchMsgPanel,
                               {
                                   xtype: 'container',
                                layout:'column',
                                forceLayout: true,
                                width:480,
                                defaults: {
                                       border:false,
                                       labelWidth: 75,
                                       defaultType: 'textfield',
                                       layout: 'form'
                                   },
                                items:[
                                {   
                                    // Column 1
                                    columnWidth: '.5',
                                    items: [
                                    {
                                        anchor: '-2',
                                        xtype: 'container',
                                        layout: 'column',
                                        items: [
                                        {
                                            columnWidth: 1,
                                            xtype: 'container',
                                            layout: 'form',
                                            items: [
                                                {
                                                    xtype:'combo'
                                                    ,fieldLabel:'Activity'
                                                    ,store:['Item 1', 'Item 2']
                                                    ,anchor: '-4'
                                                }                                        
                                            ]
                                        },{
                                            xtype: 'box',
                                            id: 'destinationToolTip',
                                            style: 'margin-top: 3px',
                                                 autoEl: { tag:'div',children:[destinationsComboTooltipImg] }
                                        }]
                                    },
                                    {
                                        anchor: '-20', fieldLabel: 'NIIN',name: 'niin',msgTarget: 'side',
                                        minLength:3,minLengthText:'Please enter minimum of 3 character'
                                    },
                                    {
                                        anchor:'-20',fieldLabel: 'Priority',name: 'priority',msgTarget: 'side',
                                        minLength:1,minLengthText:'Please enter minimum of 1 character'
                                    }
                                    ]
                                },
                                
                                {
                                    // Column 2
                                    columnWidth: '.5',
                                    labelWidth: 90,
                                    items: [{
                                        anchor: '-20',
                                        xtype:'textfield',fieldLabel: 'Requisition No',name: 'requisitionNo',msgTarget: 'side',
                                        minLength:3,minLengthText:'Please enter minimum of 3 character'
                                    },statusCombo, {
                                        anchor: '-20',
                                        xtype:'textfield',fieldLabel: 'Demand',name: 'demand',msgTarget: 'side',
                                         minLength:1,minLengthText:'Please enter minimum of 1 character'
                                    }]
                                }]
                            }]
                        });
            }
    Thanks!
    Last edited by aghextjs; 6 Apr 2010 at 7:07 AM. Reason: updated thread title

  2. #2
    Ext JS Premium Member
    Join Date
    Mar 2010
    Location
    Northern Virginia
    Posts
    61
    Vote Rating
    6
      0  

    Default [Solved]

    A good nights sleep and some more searching around the forums and I was available to solve my issue using this thread: http://www.extjs.com/forum/showthread.php?t=63985. When a panel is collapsed and have the style display:none, widths of containers are not correctly calculated.

Posting Permissions

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