ExtJS 4.1.3 filter combobox - extjs

Question

This is a 2-part question:
Primary Question: Say I have a combobox (code below) that is pulling from a store. Say I have an array that I want to filter the data by so that only certain values actually show up in the dropdown. I can't seem to find the parameter that will do that... Is there a simple way to do this?
Secondary question: I also need to be able to disable and reenable items within the drop down based on actions of the user after the dropdown is created. Is there a function that causes items to be reenabled/disabled within the dropdown?
Note: By disabled I mean 'not present' aka removed in the dom, but still present in the non-filtered store.
{
xtype: 'combobox',
anchor: '100%',
name: 'Permission_id',
fieldLabel: 'Permissions',
hideLabel: false,
displayField: 'Name',
forceSelection: true,
store: 'PermissionStore',
typeAhead: true,
valueField: 'id',
valueNotFoundText: 'Add Permission'
}

Answer 1

I think all you need is work with filters. If you want to display only certain values in the dropdown, the only thing you have to do is filter the store and if what yo have is an array, you can use an ArrayStore for that.
About your second question, if you filter your store, original values are not lost, they are save internally as an snapshot then when you clear your filters, old values are displayed again in the dropdonlist.
Please take a look at this working example: http://jsfiddle.net/lontivero/Mz6S4/1/
First answer: the method is .filter(). For example:
var store = Ext.create('Ext.data.ArrayStore', {
fields: ['Id', 'Name'],
data: [
[ 1, 'Lucas' ],
[ 2, 'Pablo' ],
[ 3, 'Francisco' ]
]
});
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Permissions',
displayField: 'Name',
store: store,
valueField: 'Id',
renderTo: Ext.getBody()
});
//Hide Pablo in the dropdownlist
store.filter([
{filterFn: function(record) { return record.get('Name') !== 'Pablo'; }}
]);
// uncomment this to reenable hidden records (to display Pablo again)
//store.clearFilter();
Second answer: clear the store's filters

Answer 2

As lontivero said, filters solve your issue:
primary: array can contain data but filter will hide it from the dropdown
secondary: filters can be changed to hide and show in the dropdown
Your remaining problem, then, is how to change the filter from non-Ext code. Here you can use the fact that Ext is just javascript and can be called from any other javascript that has nothing to do with Ext.
So:
Add some functions that apply the filters to add and remove, in a place/scope that is accessible to the HTML DOM
Add them to the onclick handlers of the (plain HTML) buttons
The trick is really to access the store by using the Ext lookup by id.
So if the following code (extending on lontivero's jsfiddle) is directly in a js file (or in a script tag), it does what you're asking for:
(jsfiddle: http://jsfiddle.net/mCv6A/)
// functions that do the filtering
var noPablo = function(record) { return record.get('Name') !== 'Pablo' }
var noJames = function(record) { return record.get('Name') !== 'James' }
// the combination of functions we'll use
var withoutJamesFilter = [{ filterFn: noPablo }, { filterFn: noJames }]
var withJamesFilter = [{ filterFn: noPablo }]
function addJames()
{
var store = Ext.getStore('people')
store.clearFilter()
store.filter(withJamesFilter)
}
function delJames()
{
var store = Ext.getStore('people')
store.clearFilter()
store.filter(withoutJamesFilter)
}
Ext.onReady(function()
{
var store = Ext.create('Ext.data.ArrayStore', {
id: 'people',
fields: ['Id', 'Name'],
data: [
[ 1, 'Lucas' ],
[ 2, 'Pablo' ],
[ 3, 'Francisco' ],
[ 4 , 'James' ]
]
})
Ext.create('Ext.form.field.ComboBox', {
fieldLabel: 'Permissions',
displayField: 'Name',
store: store,
valueField: 'Id',
renderTo: Ext.getBody()
})
// start without james in list
store.filter(withoutJamesFilter)
})
Things to consider when using it for real (rather than in a simplified example):
wrapping addJames, delJames and the variables (noPablo, noJames etc) they use in an object or immediate function so the variables don't clutter the global (window) scope
rewriting the filter variables to better share implementation (something like a function that takes a list of names and generates a filter array or filter function that filters out those names would be sensible)