PDA

View Full Version : [OPEN] Combobox with autoLoad store applies Filter?



13 Feb 2013, 7:21 AM
I have a combobox that is configured to use a store that is being autoLoaded. I noticed some code was added to the combobox class to auto-add a queryFilter based on the displayfield:


// Create the filter that we will use during typing to filter the Store
me.queryFilter = new Ext.util.Filter({
id: me.id + '-query-filter',
disabled: true,
root: 'data',
property: me.displayField
});

However it is disabled by default so I was puzzled when I saw it being added to my store autoload query string parameters:


method:getSalesReps
_dc:1360768150232
page:1
start:0
limit:25
filter:[{"property":"full_name"}]

Is this the expected behavior? This is causing problems because I had always assumed that there would be a value parameter as well as a property parameter whenever a filter querystring was sent back to the server.

mitchellsimoens
14 Feb 2013, 9:31 PM
What Ext JS 4.x.x version? And can I get a locally runnable testcase?

15 Feb 2013, 6:40 AM
What Ext JS 4.x.x version? And can I get a locally runnable testcase?

Here are the script and css tags I'm referencing:


<link href="http://cdn.sencha.com/ext/beta/4.2.0.489/resources/ext-theme-classic/ext-theme-classic-all.css">

<script src="http://cdn.sencha.com/ext/beta/4.2.0.489/ext-all-dev.js"></script>


I'm using the latest beta for 4.2.0.489. Here is my code:


Ext.onReady(function() {
Ext.define('SR', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{name: 'id', type: 'int'},
{name: 'full_name', type: 'string'},
{name: 'phone', type: 'string'},
{name: 'title', type: 'string'},
{name: 'email', type: 'string'}
]
});



var myStore = Ext.create('Ext.data.Store', {
autoLoad: true,
model : 'SR',
proxy : {
type : 'ajax',
url : '/com/qlp/crm/order/OrderStatusService.cfc?method=getSalesReps',
reader : {
type : 'json',
root : 'root'
}
}
});

var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo : Ext.getBody(),
name : 'sales_rep_filter',
fieldLabel : 'Sales Rep',
labelWidth : 75,
anchor : '99%',
store : myStore,
queryMode : 'local',
enableKeyEvents : true,
multiSelect : true,
editable : false,
displayField : 'full_name',
valueField : 'id',
emptyText : 'Select a Sales Rep',
value : 0
});
});


The idea being that I want to load all the data from the server once and then the combobox can just treat it as querymode: local.

I'll try to attach a screen shot of my the http request parameters:
41876

bizbox
15 Feb 2013, 6:44 AM
I have same problem in our system with Ext JS 4.2.0.489 RC1 version

REQUIRED INFORMATION
Ext version tested:

Ext 4.2.0.489

Browser versions tested against:

Browser independent

Description:

Parameter filter=[{"property":"name"}] is automaticaly added into combobox store load request parameters

Steps to reproduce the problem:

Try example and see request parameters in firebug

The result that was expected:

No additional filter parameters in request

The result that occurs instead:

Parameter filter=[{"property":"name"}] appeared in request parameters

Test Case:

Ext.define( 'myModel', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: '/users.json',
reader: {
type: 'json',
root: 'users'
}
},
fields: [
{
name: 'id',
type: 'integer',
required: true,
label: 'Id'
},
{
name: 'name',
type: 'string',
required: true,
label: 'Name'
},
]
} );

Ext.application( {
name: 'Combo test',
appFolder: '',
launch: function() {
var me = this;

var store = Ext.create('Ext.data.Store', {
model: 'myModel',
data : []
});

var formPanel = Ext.create('Ext.form.Panel', {
title: 'Test form',
items: [{
id: 'combo',
name: 'combo',
fieldLabel: 'Combobox',
xtype: 'combobox',
store: store,
displayField: 'name',
valueField: 'id'
}],
buttons: [{
text: 'Submit',
formBind: true,
handler: function() {
var form = this.up('form').getForm();
form.getValues();
}
}]
});

Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [ formPanel ]
} );
}
} );

15 Mar 2013, 7:33 AM
Same issue still exists In 4.2.0 (release)

Animal
15 Mar 2013, 8:29 AM
This has been reported, and fixed in the codebase. The override is available here: http://www.sencha.com/forum/showthread.php?257321-Combo-with-store-triggers-store-load-without-autoLoad&p=946177&viewfull=1#post946177

15 Mar 2013, 8:43 AM
What about when you do a store.load(). It seems that the filter is still applied because the override is only for the filter() function. Should the same allDisabled logic be applied here so that disabled filters aren't sent with the store.load() method?

From Ext.data.AbstractStore.load:



load: function (options) {
var me = this,
operation;
options = Ext.apply({
action: 'read',
filters: me.filters.items,
sorters: me.getSorters()
}, options);
me.lastOptions = options;
operation = new Ext.data.Operation(options);
if (me.fireEvent('beforeload', me, operation) !== false) {
me.loading = true;
me.proxy.read(operation, me.onProxyLoad, me);
}
return me;
},

Animal
15 Mar 2013, 8:54 AM
Yes, disabled filters should not be applied.

Sharkanana
22 Apr 2013, 7:10 AM
I am still seeing a bug here.

The combobox initcomponent does:



me.queryFilter = new Ext.util.Filter({
id: me.id + '-query-filter',
disabled: true,
root: 'data',
property: me.displayField
});
store.filter(me.queryFilter);


If you have remoteFilter:true and any non-disabled filters defined, this will trigger a load even if autoload is false when the combo/store are initialized.

I think a solution may be to do



store.filters.add(me.queryFilter);


instead, not triggering a load...but adding the filter to the array.