Sencha touch How to combine filters - forms

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
}
},
...