Hi guys,

i have 6 different filters on a single list and i want to render the app on mobile screen
to save the toolbar space I want to combine all that filters.

the problem is, when I combine these filters in a single form panel these filters dose not work
can you please guide me on how to combine them, should I combine these filters in overlay panel rather than formPanel

following is the code for filters.js



Code:
kiva.views.LoanFilter = Ext.extend(Ext.form.FormPanel, {
    ui: 'green',
    cls: 'x-toolbar-dark',
    baseCls: 'x-toolbar',
    
    initComponent: function() {
        this.addEvents('filter');
        this.enableBubble('filter');
        var form;
        var showForm = function(btn, event) {
            form = new Ext.form.FormPanel(formBase);
            form.showBy(btn);
            form.show();
        };


        Ext.apply(this, {
            defaults: {
                listeners: {
                    change: this.onFieldChange,
                    scope: this
                }
            },
            
            layout: {
                type: 'hbox',
                align: 'center'
            },
            
            items: [
                {
                    xtype: 'button',
                    iconCls:'info',
                    title:'info',
                    iconMask:true,
                    ui:'plain',
                },{
                    xtype: 'spacer'
                },/*{
                    xtype: 'selectfield',
                    name: 'search',
                    prependText: 'Search:',
                    options: [
                        {text: 'Location',  value: 'location'},
                        {text: 'Theme',     value: 'theme'},
                    ]
                },*/{
                    xtype: 'searchfield',
                    name: 'q',
                    placeholder: 'Search',
                    value: 'Destination or ID',
                    listeners : {
                        change: this.onFieldChange,
                        keyup: function(field, e) {
                            var key = e.browserEvent.keyCode;
                            // blur field when user presses enter/search which will trigger a change if necessary.
                            if (key === 13) {
                                field.blur();
                            }
                        },
                        scope : this
                    }
                },{
                  xtype: 'selectfield',
                  name : 'sort_by',
                  prependText: 'sort_by:',
                  ui:'button',
                  cls:'sortbox',
                  options: [
                      {text: 'Sort By',          value: ''},
                      {text: 'Newest',        value: 'modified'},
                      {text: 'Sleeps',        value: 'sleep_max'},
                      {text: 'Sleeps Desc',   value: 'sleep_max DESC'},
                      {text: 'Bedrooms',      value: 'bedroom'},
                      {text: 'Bedrooms Desc', value: 'bedroom DESC'},
                     // {text: 'Rates',         value: 'rates'},
                  ]
               },{
                  xtype: 'button',
                  text: 'Filters',
                  handler: showForm
              }
            ]
        });
            
        kiva.views.LoanFilter.superclass.initComponent.apply(this, arguments);
        
        
        //for filters form


        var formBase = {
            scroll: 'vertical',
            //url   :
            standardSubmit : true,
            items: [{
                    xtype: 'fieldset',
                    title: 'Filters',
                    instructions: 'Please enter the information above.',
                    defaults: {
                        //required: true,
                        labelAlign: 'left',
                        labelWidth: '30%'
                    },
                    items: [


                        {
                            xtype: 'spinnerfield',
                            name : 'sleep_max',
                            label: 'Sleeps',
                            minValue: 0,
                            maxValue:10
                        },{
                            xtype: 'spinnerfield',
                            name : 'bedroom',
                            label: 'Bedrooms',
                            minValue: 0,
                            maxValue:10
                        },{
                            xtype: 'spinnerfield',
                            name : 'rates',
                            label: 'Rates',
                            minValue: 50,
                            maxValue:5000,
                            incrementValue: 100,
                            cycle: false
                        },/*{
                            xtype: 'datepickerfield',
                            name : 'checkIn',
                            label: 'Check In',
                            destroyPickerOnHide: true,


                        },{
                            xtype: 'datepickerfield',
                            name : 'checkOut',
                            label: 'Check Out',
                            destroyPickerOnHide: true,
                        },*/{
                            xtype: 'selectfield',
                            name : 'themes',
                            label: 'Themes',
                            options: [
                                {text: 'Themes',    value: ''},
                                {text: 'Skiing',    value: 'skiing'},
                                {text: 'Golf',      value: 'golf'},
                                {text: 'Beaches',   value: 'beaches'},
                                {text: 'Adventure', value: 'adventure'},
                                {text: 'Family',    value: 'family'},
                                {text: 'Fishing',   value: 'fishing'},
                                {text: 'Boating',   value: 'boating'},
                                {text: 'Historic',  value: 'historic'},
                                {text: 'Biking',    value: 'biking'},
                            ]
                        },/*{
                            xtype: 'hiddenfield',
                            name : 'secret',
                            value: 'false'
                    },*/]
            }],
            listeners : {
                submit : function(form, result){
                    console.log('success', Ext.toArray(arguments));
                    console.log(form);
                    console.log(result);
                    form.hide();
                   // Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
                },
                exception : function(form, result){
                    console.log('failure', Ext.toArray(arguments));
                    form.hide();
                   // Ext.Msg.alert('Sent!','Your message has been sent.', form.hide());
                }
            },


            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'bottom',
                    items: [
                        {
                            text: 'Cancel',
                            handler: function() {
                                form.hide();
                            }
                        },
                        {xtype: 'spacer'},
                        {
                            text: 'Reset',
                            handler: function() {
                                form.reset();
                            }
                        },
                        {
                            text: 'Apply',
                            ui: 'confirm',
                            handler: function() {
                                form.submit({
                                    waitMsg : {message:'Submitting', cls : 'demos-loading'}
                                });
                            }
                        }
                    ]
                }
            ]
        };


        if (Ext.is.Phone) {
            formBase.fullscreen = true;
        } else {
            Ext.apply(formBase, {
                autoRender: true,
                floating: true,
                modal: true,
                centered: false,
                hideOnMaskTap: false,
                height: 300,
                width: 420,
            });
        }


    },
    
    /**
     * This is called whenever any of the fields in the form are changed. It simply collects all of the 
     * values of the fields and fires the custom 'filter' event.
     */
    onFieldChange : function(comp, value) {
    //console.log(comp);  console.log(value);


        this.fireEvent('filter', this.getValues(), this);
    }
});


Ext.reg('loanFilter', kiva.views.LoanFilter);