Search code examples
javascriptformslayoutextjsformpanel

Hidden fields not displaying right in formpanel

I have a formPanel with a column layout. It works perfectly as long as there are visible fields in every column.

I tried adding in hidden fields to provide space for the parts of the column where I need it but it's displaying very strangely. I did try changing to adding in textFields and hiding them but it was not keepingany space at all.

The screenshot below shows what I mean. There is a hidden field at the end of the 1st row at column 3 and at the bottom of the column 1 and 3 but the layout doesn't show that.

The hidden fields have been implemented as (with unique id/name values): 

{
                    id:'my_field_id',
                    name: 'my_field_name',
                    xtype: 'hidden'                
                    }

And my formpanel columns have been configured similar to: 

id: 'myForm'
     ,title: 'Search Form'
     ,frame:true     
     ,waitMessage: 'Please wait.'          
     ,initComponent: function() {    
         var config = {                 
            items: [{
                layout:'table',
                items:[{
                    //columnWidth:.25,
                    layout: 'form',
                    items: [{
                        xtype: 'datefield',
                        fieldLabel: "From Date",                        
                        id: 'date1'
                        },

                        {
                        xtype:'combo',                             
                        id: 'fieldSelecCmb1',                               
                        hiddenName: 'ddi_country',                             
                        anchor:'98%',
                        store: fieldStore,
                        displayField: 'name',
                        valueField: 'alpha2code',
                        selectOnFocus: true,
                        mode: 'local',
                        typeAhead: true,
                        editable: false,
                        triggerAction: 'all',
                        value: 'emp_id',
                        listeners:{ 
                            select: { 
                                fn:function(combo, value){                                         
                                    myStore.load({params:{ddi_country: this.value}});
                                      }
                                }  
                            }
                        },
                        {
                            id:'my_field',
                            name: 'my_field',
                            xtype: 'hidden'                
                            }
                    ]
                },

form

Solution

  • had the same problem .. we defined a component

    Ext.define('NCEN.extended.columnSpacer', {
    extend: 'Ext.form.field.Display',
    alias: 'widget.columnSpacer',
    value: '  '
});

    and just use it like

    xtype: 'columnSpacer'