Sencha touchフィルタを組み合わせる方法

Question

私は1つのリストに6種類のフィルタがあり、携帯電話の画面にアプリケーションをレンダリングしたいです ツールバーのスペースを保存します。私は単一のフォームパネルでこれらのフィルタを組み合わせると

問題は、これらのフィルタは、私は、オーバーレイパネルではなくformPanel

をこれらのフィルタを組み合わせる必要があり、あなたがそれらを結合する方法に私を導いてくださいすることができ が動作しない用量であります'グリーン'、 CLS： 'X-ツールバーダーク' baseCls：以下はfilters.js

kiva.views.LoanFilter = Ext.extend（Ext.form.FormPanel、{ UIのコードであります'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

"フィルタが機能しません"とはどういう意味ですか？ フィルタ付きのフォームが表示されていない場合は、パネルとしてフォームにfloating: trueを設定する必要があります。ポップアップを表示する場合は、フローティングする必要があります。 http://docs.sencha.com/touch/1-1/#!/api/Ext.lib.Component-cfg-floating

フォームはLoanFilterフォームの一部ではありません。フォームの理由は？form内のフィールドを変更している間は、onFieldChangeメソッドはトリガーされません。あなたは、formBase

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