Question

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

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);

Answer 1

Its not clear what do you mean under “filters doesn’t work”.
Form with filter is not showing, then probably you need to set floating: true for the form as it is a panel and need to be floated if you want to show popup. http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating

Your form is not a part of LoanFilter form (why it is a form?), so method onFieldChange will not be triggered while you changing fields inside form. You need to move event listener to formBase

var formBase = {
defaults: {
              listeners: {
                  change: this.onFieldChange,
                  scope: this
              }
          },
...