Forms Sencha touch如何组合过滤器

我在一个列表上有6个不同的过滤器，我想在手机屏幕上呈现应用程序 为了节省工具栏空间，我想合并所有过滤器

问题是，当我将这些过滤器组合在一个表单面板中时，这些过滤器不起作用 你能指导我如何组合它们吗？我应该在叠加面板而不是formPanel中组合这些过滤器吗

下面是filters.js的代码

kiva.views.LoanFilter=Ext.extend（Ext.form.FormPanel{ 用户界面：“绿色”， 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）

不清楚“过滤器不工作”下的含义。 未显示带有筛选器的表单，则可能需要为该表单设置

浮动：true

，因为它是一个面板，如果要显示弹出窗口，则需要浮动

您的表单不是

LoanFilter

表单的一部分（为什么它是表单？），因此当您更改

表单中的字段时，不会触发方法onFieldChange。您需要将事件侦听器移动到
formBase

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

嘿，保罗，谢谢你的回复。带有过滤器的表单面板正确呈现，没有任何JS错误，但过滤器中的更改不会应用于列表。我试着为Apply按钮和单个过滤器设置侦听器。此外，我还尝试在formbase中设置默认值，作为formbase之外的建议过滤器，如搜索框，排序确实正确。你能不能建议隐藏所有这些过滤器的其他方法，我不能在一个工具栏上全部显示它们。。。